Angular 2教程：英雄大厅的路由器编译但不在浏览器中显示内容

Question

I am trying to work through the Angular 2 tutorial and am getting stuck on the "Router" section. Specifically the RouterModule in app.module.ts.

As soon as I add:

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

to the imports array, the content in the browser is no longer displayed. Even after I add the routes to app.component.ts file as shown below the application only displays "Loading AppComponent content here ..." even though all files compile.

This effectively stops me in my tracks and cannot continue. It was going fine until I add this point which means my code base is okay except the router stuff.

Is there an issue in the tutorial, perhaps something out of date?

Here is the code for 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 { }

Here is the code from the 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';
    }

Any help is greatly appreciated!

Answer 1

I ran into a similar problem when I was doing the tutorials. I was able to resolve this by putting the following HTML base tag in the index.html. Hope this helps!

<base href="/">