Angular2-问题与：RouterModule.forRoot

Question

I'm following the Angular2 tutorial: Tour of Heroes 我正在关注Angular2教程：英雄之旅

All my tutorial journey has been as expected, but when arrived to the following point: 我的所有教程旅程都按预期进行，但是到达以下几点：

https://angular.io/docs/ts/latest/tutorial/toh-pt5.html#!#add-a-dashboard- https://angular.io/docs/ts/latest/tutorial/toh-pt5.html#!#add-a-dashboard-

It is not working as it should. 它无法正常工作。

It suppose to be working with: 它假定与以下对象一起工作：

1- on file: "app.module.ts", uncommenting the code: RouterModule.forRoot... 1-在文件上：“ app.module.ts”，取消注释代码： RouterModule.forRoot...

2- on file: "app.component.ts", adding the following lines to the template: 2-在文件“ app.component.ts”上，将以下行添加到模板：

<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>

I know I should provide a minimized code but I think it is not possible for me because I don't know exactly where the problem is. 我知道我应该提供一个最小化的代码，但我认为这对我来说是不可能的，因为我不确切知道问题出在哪里。 What I can say you is that I have been following the tutorial step by step and working all the time. 我可以说的是，我一直在逐步学习本教程，并且一直在努力。

Here you have a source you can download until this point: 在这里，您可以下载到此为止的源代码：

https://github.com/nightclubso/project_03 https://github.com/nightclubso/project_03

Like it is right now it is working. 就像现在一样，它正在工作。 No compilation problems. 没有编译问题。 But if you do the 2 points above then on the browser console you see lot of errors. 但是，如果您按照上述两点进行操作，则在浏览器控制台上会看到很多错误。

The files you have to modify (as the tutorials suggest) are: 您必须修改的文件（如本教程所建议）是：

app.module.ts having finally the following code: 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 { HeroService }          from './hero.service';


@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
  ],
  providers:    [ HeroService ], 
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

and app.component.ts having finally the following code: 和app.component.ts最终具有以下代码：

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

@Component ({
    selector: "my-app",
    template: `
        <h1>{{title}}</h1>
        <a routerLink="/heroes">Heroes</a>
        <router-outlet></router-outlet>
    `,
})
export class AppComponent {
    title: string = "Tour of Heroes";
}

but for some reason it doesn't display anything. 但由于某种原因，它什么也不显示。

Any idea on how to solve this? 关于如何解决这个问题的任何想法？

Answer 1

You just have configured routes in your app. 您刚刚在应用程序中配置了routes 。 So because of configured routes and router-outlet , you get nothing (as an output). 因此，由于configured routes和router-outlet ，您一无所获（作为输出）。 So, here you need to provide your routing configuration explicitly as shown below, 因此，在这里您需要显式提供路由配置，如下所示，

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

Answer 2

Just ran into this issue too. 刚遇到这个问题。 If you look at the error message, it says you need to provide a value for the APP_BASE_HREF token or add a base element. 如果查看错误消息，则表明您需要为APP_BASE_HREF令牌提供一个值或添加一个基本元素。 So you can either (recommended option) open up the index.html file and add 因此，您可以（推荐选项）打开index.html文件并添加

< base href = "/" >

under the head element giving: 在head元素下面给出：

...
<head>
  <base href="/">
  <title>Angular QuickStart</title>
...

OR 要么

go to your app.module.ts file, and where you have your "providers: ..." array, add 转到您的app.module.ts文件，然后在您的“ providers：...”数组中添加

{provide: APP_BASE_HREF, useValue : "/" }

giving: 赠送：

...
providers: [ HeroService, {provide: APP_BASE_HREF, useValue : '/' } ],
...

Angular2-问题与：RouterModule.forRoot

问题描述

2 个解决方案

解决方案1
0 2017-01-16 09:08:16

解决方案2
0 2017-02-06 17:04:08

Angular2-问题与：RouterModule.forRoot

问题描述

2 个解决方案

解决方案1 0 2017-01-16 09:08:16

解决方案2 0 2017-02-06 17:04:08

解决方案1
0 2017-01-16 09:08:16

解决方案2
0 2017-02-06 17:04:08