"Exception: Error during instantiation of t! Primary outlet already registered." in cordova angular2 app

I am building an simple cordova app with my project. It has 2 levels of nesting (main route) -> child route -> (another child route). When trying to browse to the 2nd level (another child route) I get an error saying Exception: Error during instantiation of t! Primary outlet already registered. First level works fine. I have not used router outlet twice in any template. The issue is the same in the emulation of browser as well as android.

Attached the chrome inspect 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>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <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(){}
}

Answers


I had the same problem with angular2 beta11, just not using cordova.

According to a post here you should use the non-minified version of router.js. Sounds strange, but it worked for me.


Need Your Help

How to read properties file from Jenkins 2.0 pipeline script

jenkins groovy build jenkins-pipeline environment

I am attempting to write a pipeline script to use with Jenkins 2.0 to replicate our existing build. This original build used the envInject plugin to read a Java properties file, but I can't see ho...