错误：找不到加载“仪表板组件”的主要插座？答案

【问题标题】：Error: Cannot find primary outlet to load 'DashboardComponent'?错误：找不到加载“仪表板组件”的主要插座？
【发布时间】：2017-01-25 07:39:37
【问题描述】：

我试图解决这个问题，但我不能。我是 Angular 2 的新手。我正在创建一个应用程序。但是遇到了这个错误，谁能建议我在哪里做错了？错误是：

例外：未捕获（承诺）：错误：找不到主要出口来加载“仪表板组件”

我的代码是：

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  moduleId: module.id,
  styleUrls: ['app.component.css'],
  template: ` <h1>{{title}}</h1>
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
`,
})
export class AppComponent {
  title = 'Tour of Heroes';
}

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
    moduleId:module.id,
    selector:'my-dashboard',
    templateUrl: 'dashboard.component.html',
    styleUrls: [ 'dashboard.component.css' ]

})
export class DashboardComponent implements OnInit{
 heroes: Hero[] = [];
  constructor(private heroService: HeroService) { }
  ngOnInit(): void {
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));
  }
 }

app-routing-module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { ShubhComponent } from './my.component';
import { MyComponent } from './my.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

【问题讨论】：

您的网点在哪里？它们长什么样子？

标签： angular typescript

【解决方案1】：

您应该定义一个<router-outlet>。您的 AppComponent 模板缺少此标记。这个标签是必要的，让路由器知道在哪里插入你在路由模块中定义的组件：

@Component({
  selector: 'my-app',
  moduleId: module.id,
  styleUrls: ['app.component.css'],
  template: ` <h1>{{title}}</h1>
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
  <router-outlet></router-outlet> <!-- here -->
`,
})
export class AppComponent {
  title = 'Tour of Heroes';
}

【讨论】：