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'

我的应用组件代码：

@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>

App route config：

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 }
   ]
 },
 ];

Home.Component代码：

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'）的问题是这是一种故意的行为。

每位家长必须拥有<router-outlet></router-outlet>。以下是对github https://github.com/angular/angular/issues/10686的回复。

我整整花了两天时间试图解决这个问题。我想删除children或loadChildren并将所有内容都放在同一级别是其中一种方法。

这是路由器的一个非常令人困惑和无法记录的功能。

Answer 2

要加载模板，请不要使用

templateUrl: 'app.html'

组件装饰器上的

。而是导入您的模板并按如下方式引用它

import template from './app.html';

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

未处理的Promise rejection：无法找到加载组件Angular2的主要插座

2 个答案: