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