2016-07-06 7 views
18

hat versucht, auf den neuen Router zu wechseln, wie in der Version "@ angular/router": "3.0.0-beta.2" in Kombination mit "@ angular/*": "2.0.0-rc.4", folgt den offiziellen Dokumenten auf dem ComponentRouter.Angular2 Router: Primärer Ausgang kann nicht gefunden werden 'HomeComponent'

Aber ich bin vor ein Problem, wenn ich meine App mit dem Standard-HomeComponent zu laden:

Cannot find primary outlet to load 'HomeComponent' 

Es scheint dies bei der Verwendung von templateUrl und eine externe HTML-Datei zu tun hat stattdessen die Inline-Vorlage verwenden Stil.

HomeComponent wird zunächst nicht in Windows angezeigt und der Fehler wird auf der Konsole ausgegeben. Wenn ich jedoch den Link zu Home Component verwende, wird es aus zweiter Hand angezeigt.

Sobald ich von

ändern
templateUrl: 'home.html' 

zu

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

Fehler gegangen ist, wird HomeComponent gezeigt und Routing funktioniert wie erwartet.

Ist das ein bekanntes Problem? Funktioniert es für jemanden, der templateUrl verwendet? Muss ich etwas respektieren, damit es funktioniert?

+0

Können Sie Komponentenmetadaten für die Home-Komponente anzeigen, als würden Sie eine relative URL angeben, aber nicht moduleid. moduleId: module.id. http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html –

+0

Sicher kann ich: '@ Komponente ({ selector: 'app', Richtlinien: [ROUTER_DIRECTIVES], templateUrl: '/app/components/app/app.html' }) '' und @Component ({ selector: 'start.home', Richtlinien [], templateUrl: '/app/components/start/page.home.html' }) so das sollte kein Problem sein –

+0

Template URL funktioniert. Es ist einige Setup-Problem sind Sie sicher, dass Sie Router-Richtlinie und Router-Steckdosen an der richtigen Stelle hinzugefügt. Stellen Sie einen Behälter zur Verfügung –

Antwort

27

Das Problem war, dass aufgrund eines App-Ladebildschirms die <router-outlet></router-outlet> manchmal noch nicht existiert, aufgrund einer Race Condition. Wenn Sie den HTML-Teil mit der Steckdose ausblenden möchten, verwenden Sie [hidden] anstelle von *ngIf, um sicherzustellen, dass sich die Steckdose immer im DOM befindet und nicht bedingt entfernt wird.

Verwandte Themen