각도 2 최종 릴리스 라우팅 문제

Question

각도 2 최종 릴리스 라우팅에 문제가 있습니다. 여기

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

을 내 나무입니다 : 내가 아이 컴퍼넌트에 [routerLink] 추가 할 때이 오류가 occures 파일의 컨텐츠 이제

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 

그리고 :

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

01 내가 버튼을 제거하면

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에 login.component.html

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

, 모든 것이 잘 작동합니다. 나는 user.component.ts에 버튼을 추가하는 경우 는 또한, 작동 :

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

지침, 구성 요소 및 파이프는 자식 모듈로 부모 모듈에 의해 상속되지 않습니다. 필요한 모듈을 모두 하위 모듈로 가져와야합니다. LoginModule에서 가져 본 적이 없습니다. RouterModule