Angular 2チュートリアル：Hall of Heroesはブラウザでコンテンツをコンパイルしますが、コンテンツを表示しません。

Question

Angular 2チュートリアルで作業しようとしていて、「ルータ」セクションに固執しています。具体的には、app.module.tsのRouterModuleです。できるだけ早く私は、追加として

：

RouterModule.forRoot([ 
     { 
      path: '', 
      redirectTo: '/heroes', 
      pathMatch: 'full' 
     }, 
     { 
      path: 'heroes', 
      component: HeroesComponent 
     } 

輸入・アレイに、ブラウザ内のコンテンツは表示されなくなります。下に示すようにapp.component.tsファイルにルートを追加した後でも、すべてのファイルがコンパイルされているにもかかわらず、「AppComponentコンテンツをここにロードしています...」と表示されます。

これは私のトラックで効果的に停止し、続行できません。この点を追加するまではうまくいきました。つまり、ルータのものを除いて私のコードベースは大丈夫です。

チュートリアルに問題はありますか？古いものがありますか？ここで

はapp.module.tsのコードです：ここで

import { NgModule }  from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { FormsModule } from '@angular/forms'; 
    import { RouterModule } from '@angular/router'; 

    import { AppComponent } from './app.component'; 
    import { HeroDetailComponent } from './hero-detail.component'; 
    import { HeroesComponent } from './heroes.component'; 
    import { DashboardComponent } from './dashboard.component'; 

    import { HeroService } from './hero.service'; 

    @NgModule({ 
     imports: [ 
     BrowserModule, 
     FormsModule, 
     RouterModule.forRoot([ 
      { 
       path: '', 
       redirectTo: '/heroes', 
       pathMatch: 'full' 
      }, 
      { 
       path: 'heroes', 
       component: HeroesComponent 
      } 
     ]) 
     ], 
     declarations: [ 
     AppComponent, 
     HeroDetailComponent, 
     HeroesComponent 
     ], 
     providers: [ 
     HeroService 
     ], 
     bootstrap: [ 
     AppComponent 
     ] 
    }) 

    export class AppModule { } 

がapp.component.tsからのコードです：

import { Component } from '@angular/core'; 

    import { HeroesComponent } from './heroes.component'; 

    @Component({ 
     selector: 'my-app', 
     template: ` 
      <h1>{{title}}</h1> 
      <nav> 
       <a routerLink="/heroes">Heroes</a> 
      </nav> 
      <router-outlet></router-outlet> 
     ` 
    }) 

    export class AppComponent { 
     title = 'Tour of Heroes'; 
    } 

すべてのヘルプは大歓迎です！

Answer 1

私はチュートリアルをやっているときに同様の問題に遭遇しました。私はindex.htmlに次のHTMLベースタグを置くことでこれを解決できました。お役に立てれば！

<base href="/">