エラー： 'DashboardComponent'をロードするプライマリコンセントを見つけることができません。

Question

私はこの問題を解決しようとしましたが、できませんでした。 私はアングル2で新しいです。私はアプリを作成しています。 しかし、このエラーが表示され、誰かが私に間違っていることを教えてもらえますか？ エラーは次のとおりです。

例外：キャッチされない（約束で）：エラー：

app.component.ts

： 'DashboardComponent'

マイコードがロードするために第一出口を見つけることができません

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)); 
    } 
} 

アプリルーティング-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 {} 

Answer 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'; 
}