I am creating a simple cordova application with my project. It has 2 nesting levels (main route) → a children's route → (another children's route). When trying to browse to the 2nd level (another child route) I get an error message Exception: Error during instantiation of t! Primary outlet already registered. Exception: Error during instantiation of t! Primary outlet already registered. The first level works fine. I have not used the router twice in any template. The problem is the same in emulating the browser as well as the android.
Attach the chrome revision below.
My html file
<html> <head> <base href="./"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="assets/css/style.css" rel="stylesheet" type="text/css" /> <link href="assets/css/skins/skin-white.css" rel="stylesheet" type="text/css" /> <title>Hello World</title> </head> <body> <main-app> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> </div> </div> </main-app> <head> <script src="js/angulardeps/2.0.0-beta.9/shims_for_IE.js"></script> <script src="js/angulardeps/2.0.0-beta.9/es6-shim.min.js"></script> <script src="js/angulardeps/2.0.0-beta.9/system-polyfills.js"></script> <script src="js/angulardeps/2.0.0-beta.9/angular2-polyfills.js"></script> <script src="js/angulardeps/2.0.0-beta.9/system.js"></script> <script src="js/angulardeps/2.0.0-beta.9/Rx.js"></script> <script src="js/angulardeps/2.0.0-beta.9/angular2.dev.js"></script> <script src="js/angulardeps/2.0.0-beta.9/router.min.js"></script> <script src="js/angulardeps/2.0.0-beta.9/http.min.js"></script> <script src="assets/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script> <script src="assets/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body>
My build source structure: 
My main component:
import {Component} from 'angular2/core'; import {ApproutesComponent} from '../app/approutes'; import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router'; @RouteConfig([ {path: '/d/...', component: ApproutesComponent, name: 'ApproutesCmp', useAsDefault:true} ]) @Component({ selector: 'main-app', templateUrl: 'app/r/main/rmain.html', directives:[ROUTER_DIRECTIVES] }) export class RroutesComponent { constructor(){} }
android angular cordova router
Gary
source share