Angular 2 Final Release routing issue

Question

I have some issue with Angular 2 Final Release routing. When I add a [routerLink] in a child component, this error occures:

Can't bind to 'routerLink' since it isn't a known property of 'button'

Here is my tree :

app
|
|___ app.routes.ts
|___ app.module.ts
|
|___ user
|_______ user.routes.ts
|_______ user.module.ts
|_______ user.component.ts
|
|_______ login
|____________ login.module.ts
|____________ login.component.html
|____________ login.component.ts

And now the files content :

app.routes.ts

import { Routes } from '@angular/router';

import { UserRoutes } from './user/user.component';

export const routes: Routes = [
  ...UserRoutes
];

app.module.ts

import { APP_BASE_HREF }  from '@angular/common';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { RouterModule }         from '@angular/router';
import { HttpModule }           from '@angular/http';

import { AppComponent }         from './app.component';
import { routes }               from './app.routes';

// Modules
import { UserModule }           from './user/user.module';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), UserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },

  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

user.routes.ts

import { Route }                from '@angular/router';

import { UserComponent }        from './user.component';
import { LoginComponent }       from './login/login.component';



export const UserRoutes: Route[] = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent
            }
        ]
    }
];

user.module.ts

import { NgModule }                     from '@angular/core';
import { CommonModule }                 from '@angular/common';
import { RouterModule }                 from '@angular/router';

import { UserComponent }                from './user.component';

import { LoginModule }                  from './login/login.module';



@NgModule({
    imports: [CommonModule, RouterModule, LoginModule],
    declarations: [UserComponent],
    exports: [UserComponent]
})

export class UserModule { }

user.component.ts

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

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<router-outlet></router-outlet>',
})
export class UserComponent { }

login.module.ts

import { NgModule }             from '@angular/core';
import { CommonModule }         from '@angular/common';
import { ReactiveFormsModule }  from '@angular/forms';
import { LoginComponent }       from './login.component';


@NgModule({
    imports: [CommonModule, ReactiveFormsModule],
    declarations: [LoginComponent],
    exports: [LoginComponent]
})

export class LoginModule { }

login.component.html

<button [routerLink]="['/']">Back home</button>

On the login.component.html, if I remove the button, everything work well. Moreover, If I add the button in the user.component.ts it works:

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

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<button [routerLink]="[\'/\']">Back home</button>',
})
export class UserComponent { }

Answer 1

Directive, components, and pipes aren't inherited by parent modules into child modules. You need to import any required modules into the child also. In the LoginModule, you never imported the RouterModule