找不到主要出口来加载“LocalizationListComponent”

我正在创建一个 Angular 2 RC5 应用程序，每个模块都是延迟加载的。当应用程序启动时，它会显示来自的列表LocalizationListComponent，按预期，但控制台中有一条消息说Cannot find primary outlet to load 'LocalizationListComponent'。考虑到显示的列表和抱怨该组件的错误是非常奇怪和不寻常的。

为了解决这个问题我需要添加<router-outlet>和...一起ROUTER_DIRECTIVES受此错误影响的每个组件和视图。这样做的问题是该列表将显示两次，并且详细信息屏幕会加载到该列表下。这不是我想要的行为。

之后，我在 angular.io 上浏览了 Angular 2 路由教程，并检查了他们的 plunker 代码。一切似乎都是一样的，但错误仍然存​​在。

I've uploaded the application to dropbox (inactive link)

以下是模块、路由和组件（对于长列表，我深表歉意）：

应用程序.routes.ts

import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [
    {
        path: "",
        redirectTo: "/localizations",
        pathMatch: "full"
    },
    {
        path: "localizations",
        loadChildren: "./app/modules/localization/localization.module",
    }
];

export const appRoutes = RouterModule.forRoot(routes);

应用程序模块.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { appRoutes } from "../routes/app.routes"

import { AppComponent } from "../components/app.component";
import { AppNavigationComponent } from "../components/app-navigation.component";
import { AppStartComponent } from "../components/app-start.component";

import { LoggerModule } from "./logging/logger.module";
import { SharedModule } from "./shared/shared.module";

@NgModule({
    imports: [ BrowserModule, LoggerModule.forRoot(), SharedModule, appRoutes ],
    declarations: [ AppComponent, AppNavigationComponent, AppStartComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {

}

应用程序组件.ts

/// <reference path="../../typings/globals/node/index.d.ts" />

import { Component, OnInit, OnDestroy } from "@angular/core";
import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from "@angular/router";
import { AppNavigationComponent } from "./app-navigation.component";

import { LoggerMessageType } from   "../modules/logging/models/enums/LoggerMessageType";
import { AbstractLogger } from "../modules/logging/interfaces/AbstractLogger";

@Component({
    moduleId: module.id,
    selector: "vms-localization-app",
    templateUrl: "../views/app.component.html",
    directives: [ ROUTER_DIRECTIVES ]
})
export class AppComponent {
    status: string;

    constructor(private logger: AbstractLogger) {
        this.status = "Alpha 0.1";
    }

    ngOnInit() : any {

    }

    ngOnDestroy() : any {

    }
}

本地化.module.ts

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { localizationRoutes } from "./routes/localization.routes";

import { LocalizationListComponent } from "./components/localization-list.component";
import { LocalizationDetailsComponent } from "./components/localization-details.component";

import { AbstractLocalizationService } from "./interfaces/AbstractLocalizationService";
import { MockLocalizationService } from "./services/mock-localization.service";

@NgModule({
    imports: [ localizationRoutes, CommonModule, FormsModule, RouterModule ],
    declarations: [ LocalizationListComponent, LocalizationDetailsComponent ],
    providers: [ { provide: AbstractLocalizationService, useClass: MockLocalizationService } ]
})
export default class LocalizationModule {

}

本地化.routes.ts

import { Routes, RouterModule } from "@angular/router";
import { LocalizationListComponent } from "../components/localization-list.component";
import { LocalizationDetailsComponent } from "../components/localization-details.component";

const routes: Routes = [
    {
        path: "",
        component: LocalizationListComponent,
        children: [
            {
                path: "localization",
                component: LocalizationListComponent
            },
            {
                path: ":id",
                component: LocalizationDetailsComponent
            },
            {
                path: "",
                component: LocalizationListComponent
            }
        ]
    }
];

export const localizationRoutes = RouterModule.forChild(routes);

本地化列表.component.ts

import { Component, OnInit } from "@angular/core";
import { Localization } from '../models/localization';
import { Language } from "../models/language";

import { AbstractLocalizationService } from "../interfaces/AbstractLocalizationService";
import { AbstractLogger } from "../../logging/interfaces/AbstractLogger";
import { LoggerMessageType } from "../../logging/models/enums/LoggerMessageType";

@Component({
    moduleId: module.id,
    selector: "localization-list",
    templateUrl: "../views/localization-list.component.html"
})
export class LocalizationListComponent implements OnInit {
    localizations: Localization[];
    languages: Language[];

    constructor(private localizationService: AbstractLocalizationService,
            private logger: AbstractLogger) {

    }

    ngOnInit() : any {
        this.localizationService.getLocalizations()
            .subscribe((result: Localization[]) => {
                this.localizations = result;
                this.languages = this.localizations[0].languages;
            });
    }
}

应用程序组件.html

<div class="container">
    <div class="page-header">
      <h1>VMS Localization<small>{{ status }}</small></h1>
      <app-navigation></app-navigation>
    </div>

    <router-outlet></router-outlet>
</div>

上面的片段（以及提供的项目）一定有问题，但我看不到任何问题。

我还检查了 StackOverflow 上的其他问题，但它们主要处理 app.component.ts 中缺少的 ROUTER_DIRECTIVES

感谢您的帮助！

我刚刚在 GitHub 上遇到一个问题（https://github.com/angular/angular/issues/10686 https://github.com/angular/angular/issues/10686）其中解释这是一种故意行为。每一位父母都拥有children（似乎同样适用于loadChildren）必须有自己的插座来加载子项。

似乎这在任何地方都没有记录路由器文档 https://angular.io/docs/ts/latest/guide/router.html.

更新： 当你声明children在模块的路由器中，每个父级都必须有自己的<router-outlet></router-outlet>为了加载这个孩子。如何实现这个取决于需求。对于我的解决方案，我创建了一个空组件，其中仅包含<router-outlet></router-outlet>并将路线定义如下：

import { Routes, RouterModule } from "@angular/router"
import { SomeParentComponent } from "./app/modules/SomeModule/SomeParentComponent"
import { SomeChildComponent1 } from "./app/modules/SomeModule/SomeChild1Component"
import { SomeChildComponent2 } from "./app/modules/SomeModule/SomeChild2Component"

const routes: Routes = [
    path: "",
    component: SomeParentComponent,
    children: [
        {
            path: "",
            component: SomeChild1Component
        },
        {
            path: ":id",
            component: SomeChild2Component
        }
    ]
]

export const someModuleRoutes = RouterModule.forChild(routes);

这应该可以解决问题，因为主组件路由将调用loadChildren指着SomeParentComponent.