Unbehandelte Versprechen Ablehnung: Kann nicht primäre Steckdose zu laden Komponente Angular2

Question

Ich versuche, Login-Funktionalität mit angular2-Seed-Projekt als Basis zu implementieren und Bezug auf angular2-Login-Samen. Aber ich bekomme den folgenden Fehler. Ich habe mir die anderen Fragen angesehen, die sich auf den gleichen Fehler beziehen, konnte aber nicht herausfinden, was mit meinem Code falsch ist. Bitte helfen Sie.

Unhandled Promise rejection: Cannot find primary outlet to load 'HomeComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'HomeComponent' 

Meine App Komponentencode:

@Component({ 
    moduleId: module.id, 
    selector: 'sd-app', 
    viewProviders: [NameListService, HTTP_PROVIDERS], 
    templateUrl: 'app.component.html', 
    directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent] 
}) 
export class AppComponent { 
    constructor() { 
    console.log('Environment config', Config); 
    } 
} 

app.component.html Code:

<sd-navbar><router-outlet></router-outlet></sd-navbar> 

App Route config:

const routes: RouterConfig = [ 
    { 
    path: 'login', 
    component: LoginComponent, 
    canActivate: [UnauthenticatedGuard] 
    }, 
    ...HomeRoutes, 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes),UnauthenticatedGuard, HomeComponentGuard 
]; 

HomeRoutes Code:

export const HomeRoutes = [ 
{ 
    path: '', 
    component: HomeComponent, 
    canActivate: [HomeComponentGuard], 
    children: [ 
    { path: '', component: HomeComponent }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent } 
    ] 
}, 
]; 

Home.Component Code:

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { NameListService } from '../shared/index'; 

@Component({ 
    moduleId: module.id, 
    selector: 'wrapper', 
    templateUrl: 'home.component.html', 
    styleUrls: ['home.component.css'], 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class HomeComponent { 
    newName: string; 
    constructor(public nameListService: NameListService) { 
     console.log("nameList: " + JSON.stringify(nameListService.get())); 
    } 

    addName(): boolean { 
    this.nameListService.add(this.newName); 
    this.newName = ''; 
    return false; 
    } 

} 

Answer 1

folgt zwar nicht ganz die Antwort, die Sie erwartet haben, das Problem, dass wir beide haben (Cannot find primary outlet to load 'LocalizationListComponent') ist, dass dies ein vorsätzliches Verhalten ist.

Alle Eltern müssen <router-outlet></router-outlet> haben. Hier ist eine Antwort auf GitHub https://github.com/angular/angular/issues/10686.

Ich verbrachte zwei ganze Tage damit, dieses Ding herauszufinden. Ich denke, Entfernen children oder loadChildren und alles auf dem gleichen Niveau zu behandeln ist eine der Möglichkeiten zu gehen.

Dies ist eine sehr verwirrende und undokumentierte Funktion des Routers.

Answer 2

Ihre Vorlagen nicht verwenden

templateUrl: 'app.html' 

auf dem Component Dekorateur zu laden. Statt Vorlage importieren und Referenz als

import template from './app.html'; 

@Component({ 
    selector: 'app', 
    template 
})