找不到要加载"LocalizationListComponent"的主要出口 [英] Cannot find primary outlet to load 'LocalizationListComponent'
问题描述
我正在创建Angular 2 RC5应用程序，并且每个模块都是延迟加载的.当应用程序启动时，它会按预期显示LocalizationListComponent的列表，但是控制台中会显示一条消息，提示Cannot find primary outlet to load 'LocalizationListComponent'.考虑到显示了该列表，并且错误抱怨该组件是非常奇怪和不寻常的.
I am creating an Angular 2 RC5 application and every module is lazy loaded. When the application starts it displays the list from LocalizationListComponent, as intended, but there is a message in the console which says Cannot find primary outlet to load 'LocalizationListComponent'. Considering that the list is displayed and the error complains about the very component is very strange and unusual.
为了解决这个问题，我需要将<router-outlet>和ROUTER_DIRECTIVES一起添加到每个组件中，并查看受此错误影响的视图.问题在于，该列表将被显示两次，并且详细信息屏幕被加载到该列表下.这不是我想要的行为.
In order to resolve this I need to add <router-outlet> together with ROUTER_DIRECTIVES to every component and view that is affected by this error. The problem with this is that the list will be presented twice and the details screen is loaded under this list. This is not the behavior I want.
此后，我阅读了有关angular.io的Angular 2 Routing教程，并检查了他们的代码.一切似乎都是相同的，但错误仍然存在.
After this I went through Angular 2 Routing tutorial on angular.io and I checked their plunker code. Everything seems to be identical, but the error persists.
我已将应用程序上传到保管箱( inactive link)
以下是模块，路线和组件(我为冗长的清单表示歉意):
Here are the modules, routes and components (I apologize for the long list):
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);
localization-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>
上面的片段(和提供的项目)肯定有问题，但是我看不到任何片段.
There must be something wrong with the above fragments (and the supplied project), but I cannot see any of it.
我还检查了StackOverflow上的其他问题，但它们主要处理的是我在app.component.ts中缺少的ROUTER_DIRECTIVES
I also checked other questions on StackOverflow but they mostly deal with missing ROUTER_DIRECTIVES which I have in the app.component.ts
感谢您的帮助！
推荐答案
I just came across an issue on GitHub (https://github.com/angular/angular/issues/10686) where it is explained that this is an intentional behavior. Every parent that has children (and it seems the same goes for loadChildren) must have it's own outlet in which to load the children.
路由器文档中似乎没有任何文档.
It seems that this was not documented anywhere in the Router documentation.
更新:
当您在模块的路由器中声明children时，每个父级都必须拥有自己的<router-outlet></router-outlet>才能加载此子级.如何实现这一点取决于需求.对于我的解决方案，我创建了一个仅包含<router-outlet></router-outlet>的空组件，并将路由定义如下:
UPDATE:
When you declare children in a module's router, each parent must have it's own <router-outlet></router-outlet> in order to load this children. How to implement this depends on the needs. For my solution I created an empty component that just contains <router-outlet></router-outlet> and defined the route as following:
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.
This should do the trick as the main component route will call loadChildren pointing at SomeParentComponent.
这篇关于找不到要加载"LocalizationListComponent"的主要出口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
