roll roll -4 years ago 127
AngularJS Question

Angular2 link on component imported on core.module don't work

Following the Style guide https://angular.io/styleguide#!#04-11 on angular docs.
I created

app.component
with simple links
<a routerLink="hello">hello</a>
the navigation works fine. On the other hand, i created
header.component.ts
that is imported on
core.module.ts
and core.module is imported in
app.module.ts
.
Now only links on
header.component.ts
does not work i do not know why.

Plunker version
plnkr.co/edit/AsYNoWPWjNw5ZqpNZqta?p=preview

Here my simplified code.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routing } from './app.routing';
import { CoreModule } from './core/core.module';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';
import { ByeComponent } from './bye/bye.component';

@NgModule({
imports:[
BrowserModule,
CoreModule,
routing
],
declarations:[
AppComponent,
HelloComponent,
ByeComponent
],
bootstrap:[ AppComponent ]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:`
<div class="page">
<app-header></app-header>
<router-outlet></router-outlet>
those links works fine:
<a routerLink="hello">hello</a>
<a routerLink="bye">bye</a>
</div>
`
})
export class AppComponent {}


// core.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
@NgModule({
imports: [
CommonModule
],
exports: [HeaderComponent],
declarations: [HeaderComponent],
providers: []
})
export class CoreModule { }

// header.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
template:`<div style="border:1px solid red;">
this is header section, those links dont work:
<a routerLink="hello">hello</a>
<a routerLink="bye">about</a>
</div>
`
})
export class HeaderComponent{}

// simple page bye.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-bye',
template: `<p>
Page "Bye"
</p>
`
})
export class ByeComponent { }

//simple page hello.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template:`<p>
Page "Hello"
</p>
`
})
export class HelloComponent {}



// app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello/hello.component';
import { ByeComponent } from './bye/bye.component';
const appRoutes: Routes = [
{
path:'',
component:HelloComponent
},
{
path:'hello',
component:HelloComponent
},
{
path:'bye',
component:ByeComponent
}
]

export const routing:ModuleWithProviders = RouterModule.forRoot(appRoutes);

Answer Source

You forgot to import RouterModule into your CoreModule. I believe that you have to specify all the modules used in each module because they are supposed to be separate, reusable units (in theory).

Please change it to this:

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@NgModule({
    imports: [
    CommonModule,
    RouterModule
    ],
    exports: [HeaderComponent],
    declarations: [HeaderComponent],
    providers: []
})
export class CoreModule { }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download