Angular2 - Issue with: RouterModule.forRoot
Question
I'm following the Angular2 tutorial: Tour of Heroes
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-
It is not working as it should.
It suppose to be working with:
1- on file: "app.module.ts", uncommenting the code: RouterModule.forRoot...
2- on file: "app.component.ts", adding the following lines to the template:
<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
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:
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:
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?
2 answers
solution1
0 2017-01-16 09:08:16
You just have configured routes in your app. So because of configured routes and router-outlet , you get nothing (as an output). So, here you need to provide your routing configuration explicitly as shown below,
RouterModule.forRoot([
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{
path: 'heroes',
component: HeroesComponent
}
])
solution2
0 2017-02-06 17:04:08
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. So you can either (recommended option) open up the index.html file and add
< base href = "/" >
under the head element giving:
...
<head>
<base href="/">
<title>Angular QuickStart</title>
...
OR
go to your app.module.ts file, and where you have your "providers: ..." array, add
{provide: APP_BASE_HREF, useValue : "/" }
giving:
...
providers: [ HeroService, {provide: APP_BASE_HREF, useValue : '/' } ],
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.