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

Question

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 1

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 { }