angular - 未处理的 promise 拒绝 : Cannot find primary outlet to load component Angular2

Question

我正在尝试使用 angular2-seed 项目作为基础并引用 angular2-login-seed 来实现登录功能。但是我收到以下错误。我查看了与相同错误相关的其他问题，但无法弄清楚我的代码有什么问题。请帮忙。

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

我的 App 组件代码:

@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代码:

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

应用路由配置:

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

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

HomeRoutes代码:

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

首页.组件代码:

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

虽然这不是您所期望的答案，但我们都有的问题 ( Cannot find primary outlet to load 'LocalizationListComponent' ) 是这是一种有意的行为。

每个 parent 都必须拥有<router-outlet></router-outlet> .这是 github 上的回复 https://github.com/angular/angular/issues/10686 .

我花了整整两天时间来弄清楚这件事。我想删除 children或 loadChildren在同一水平上对待所有事物是一种方法。

这是路由器的一个非常困惑且未记录的功能。