Sto costruendo una semplice app cordova con il mio progetto. Dispone di 2 livelli di annidamento (percorso principale) -> percorso figlio -> (altro percorso figlio). When trying to browse to the 2nd level (another child route)
Viene visualizzato il messaggio di errore Exception: Error during instantiation of t! Primary outlet already registered.
Il primo livello funziona correttamente. Non ho usato il router outlet due volte in nessun modello. Il problema è lo stesso nell'emulazione del browser e di Android."Eccezione: errore durante l'istanziazione di t! Presa primaria già registrata." in cordova angular2 app
Attaccato al cromato ispezionare di seguito.
mio file HTML
<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>
La mia struttura fonte di generazione:
La mia componente principale:
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(){}
}
Penso che ti sia sfuggita la parte più importante ... il codice ... è riproducibile in un plnkr usando cordova? Non ne so nulla, ma il problema è con il router. –
Sì, il codice viene eseguito correttamente su un server. È quando emulo o costruisco con Cordova ottengo l'errore. È un errore del router. – Gary
Puoi fornire il codice del componente principale? –