错误：找不到主要出口来加载“ProfileDetailsComponent”答案

【问题标题】：Error: Cannot find primary outlet to load 'ProfileDetailsComponent'错误：找不到主要出口来加载“ProfileDetailsComponent”
【发布时间】：2016-11-19 09:56:30
【问题描述】：

我正在尝试在我的应用程序中使用路由，使用路由器版本 3.0.0-beta.1，应用程序正在运行，但是当我单击 subject.component.html 中的“下一步”按钮时，我期待获得“profileDetails.component.html”的内容。我创建了一个 plunkr 例如。在这里：@ 987654321@ 虽然我猜由于我正在使用的角度2材料按钮等原因，它在plunkr上不起作用，但是谁能告诉我我哪里出错了？这是我的 main.ts：

import {bootstrap} from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import {AppComponent} from './app/app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import { appRouterProviders } from './app/app.routes';

//import {disableDeprecatedForms, provideForms} from '@angular/forms';

bootstrap(AppComponent, [
  // disableDeprecatedForms(),
  // provideForms(),
  HTTP_PROVIDERS,
  appRouterProviders
]);

这里是 app.routes.ts：

import { provideRouter, RouterConfig } from '@angular/router';
import {SubjectsComponent} from './subjects.component';
import {ProfileDetailsComponent} from './profileDetails.component';
import {AgreementComponent} from './agreement.component';

export const routes: RouterConfig = [
  { path: 'card', component: BasicCardComponent },
  { path: 'subjects', component: SubjectsComponent },
  { path: 'profile', component: ProfileDetailsComponent },
  { path: 'agreement', component: AgreementComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];

这是我的 app.component.ts：

@Component({
  selector: 'my-app',
  template: `
  <a [routerLink]="['/card']"></a>
  <router-outlet></router-outlet>
  ` ,
 // templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css'],
  directives: [BasicCardComponent, MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ROUTER_DIRECTIVES],
  providers:[MdIconRegistry]
})

流程有点像这个 app.component.ts->basicCard.component.ts->basicCard.component.html->subjects.component.ts->subjects.component.html->profileDetails.component.ts- >profileDetails.component.html

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

在您的app.component 中，您缺少路由器出口指令。

@Component({
  selector: 'my-app',

                          // you can do somthing like this
  template: `<card></card> 
            <router-outlet></router-outlet> `,
  styles: ....
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {

}

plunker

【讨论】：

但是我在 app.component.ts 和中添加了 template: basicCard.component.html，我已经在问题中提供了 plunkr 链接...
问题是路由器出口在一个ngIf中。
@HimanshiGupta，您仍然需要在顶级组件中提供一个路由器插座。这是 Angular 抱怨找不到的“主要出口”。
但我希望配置文件组件仅在单击 basicCard.html 中的“下一步”按钮时出现...我应该使用什么来代替 ngIf..？
@jessepinho 我尝试了你的建议并在我的问题中添加了 app.component.ts，现在我得到了：可能未处理的拒绝 [2] 错误：无法匹配任何路线：在 Observable.eval [作为_subscribe]