2016-07-06 38 views
18

provato a passare al nuovo router come nella versione "@ angular/router": "3.0.0-beta.2" in combinazione con "@ angular/*": "2.0.0-rc.4", seguendo i documenti ufficiali sul ComponentRouter.Router Angular2: impossibile trovare la presa primaria per caricare "HomeComponent"

Tuttavia, io sono di fronte un problema quando si cerca di caricare la mia app con la HomeComponent default:

Cannot find primary outlet to load 'HomeComponent' 

sembra che questo ha a che fare con l'utilizzo di TemplateURL e un file HTML esterno invece di utilizzare il modello in linea stile.

HomeComponent inizialmente non viene visualizzato in Window e l'errore viene stampato sulla console. Tuttavia, quando uso il collegamento a Componente principale, viene visualizzato di seconda mano.

Appena cambio da

templateUrl: 'home.html' 

a

template: '<router-outlet></router-outlet>' 

errore è andato, HomeComponent viene mostrato e il routing funziona come previsto.

È un problema noto? Funziona per qualcuno che utilizza templateUrl? C'è qualcosa che devo rispettare per farlo funzionare?

+0

Puoi mostrare i metadati del componente per il componente home in modo simile all'URL relativo ma non all'impostazione di moduleid. moduleId: module.id. http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html –

+0

Certo che posso: '@Component ({ selettore: 'app', direttive: [ROUTER_DIRECTIVES], TemplateURL: '/app/components/app/app.html' }) 'e' @Component ({ selettore: 'start.home', direttive: [], TemplateURL: '/app/components/start/page.home.html' }) 'così non dovrebbe essere un problema –

+0

L'URL del modello funziona. È un problema di installazione che è sicuro di aver aggiunto la direttiva del router e le prese del router nella posizione corretta. Fornire un plunker –

risposta

27

Il problema era che, a causa di una schermata di caricamento dell'app, lo <router-outlet></router-outlet> non esisteva ancora, a causa di una condizione di competizione. Se è necessario nascondere la parte html contenente la presa, utilizzare [hidden] anziché *ngIf per assicurarsi che l'uscita sia sempre nel DOM e non rimossa in modo condizionale.

Problemi correlati