找不到加载'LocalizationListComponent'的主要插座

Question

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

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

在此之后,我通过angular.io上的Angular 2 Routing教程,检查了他们的plunker代码.一切似乎都是相同的,但错误仍然存​​在.

我已将应用程序上传到dropbox(inactive link)

这是模块,路线和组件(我为长列表道歉):

app.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);

app.module.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 {

}

app.component.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 {

    }
}

localization.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 {

}

localization.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);

本地化,list.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;
            });
    }
}

app.component.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

谢谢你的帮助!

Answer 1

我刚刚在GitHub上遇到了一个问题(https://github.com/angular/angular/issues/10686),其中解释说这是一种故意的行为.每个拥有children(并且看起来都一样loadChildren)的父母必须拥有自己的出口来装载孩子.

似乎在路由器文档中的任何地方都没有记录.

更新:当您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.