角路由未被捕获的错误

Question

我有以下几点：

我收到一个错误说：

：

compiler.es5.js:1690 Uncaught Error: Template parse errors: 
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("   <div class="navbar-header"> 
       <ul class="nav navbar-nav list-inline"> 
        <li class="home"><a [ERROR ->][routerLink]="['/home']">Login</a></li> 
        <li class="child"><a [routerLink]="['/child']">Child</a>"): ng:///HomeModule/HomeComponent.html@7:25 
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("inline"> 
        <li class="home"><a [routerLink]="['/home']">Login</a></li> 
        <li class="child"><a [ERROR ->][routerLink]="['/child']">Child</a></li> 
        <li class="parent"><a [routerLink]="['/parent']">Parent"): ng:///HomeModule/HomeComponent.html@8:26 
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("</li> 
        <li class="child"><a [routerLink]="['/child']">Child</a></li> 
        <li class="parent"><a [ERROR ->][routerLink]="['/parent']">Parent</a></li> 
       </ul> 
      </div> 

但是我在app.modules.ts宣布它

@NgModule({ 
    declarations: [], 
    imports: [ 
     RouterModule.forRoot(appRoutes), 
     BrowserModule, 
     ChildModule, 
     ParentModule, 
     HomeModule 
    ], 
    providers: [], 
    bootstrap: [HomeComponent] 
}) 
export class AppModule { } 

在我的HomeComponent.html我有标题：

<header id="header"> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <ul class="nav navbar-nav list-inline"> 
        <li class="home"><a [routerLink]="['/home']">Login</a></li> 
        <li class="child"><a [routerLink]="['/child']">Child</a></li> 
        <li class="parent"><a [routerLink]="['/parent']">Parent</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

但它是说它承认属性。

我已上载的代码的GitHub：[GitHub的] [2]

------------更新1 -------------- -

我更新CommonModule.ts

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

@NgModule({ 
    declarations: [], 
    // you don't need anything here since this module has no templates for Angular to parse! 
    imports: [RouterModule], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class CommonModule { } 

然后我导入到app.module.ts

@NgModule({ 
    declarations: [], 
    imports: [ 
     BrowserModule, 
     ChildModule, 
     ParentModule, 
     HomeModule, 
     CommonModule 
    ], 
    providers: [], 
    bootstrap: [HomeComponent] 
}) 
export class AppModule { } 

错误：

[2]：https://github.com/drewjocham/Routing.gitERROR在

ERROR in /Users/drew/Documents/OutputInput/Sample/node_modules/@angular/common/src/common_module.d.ts (11,15): Cannot find name 'RouterModule'. 
ERROR in /Users/drew/Documents/OutputInput/Sample/node_modules/@angular/common/src/common_module.d.ts (13,9): Cannot find name 'RouterModule'. 

Answer 1

这是因为HomeComponent是在Module这并不导入RouterModule声明。 RouterLink是属于它的指令。

要解决这个问题，您可以将RouterModule添加到HomeModule的进口数组中。

Answer 2

要理解这样的错误，最好了解一下Angular流程模板的使用方法。基本版本如下：

1. 角读取所有的组件，指令和原装进口模块出口管道 - 例如，当您导入BrowserModule到您的AppModule，所有组件和CommonModule指令都可以被读取，因为BrowserModule出口CommonModule

2. Angular读取在当前模块中声明的所有组件，指令和管道。

该列表组成了Angular在扫描模板时的操作环境。这意味着，除非你宣布你的模块中的指令，或从另一个模块导入后，在模块模板两端角时谈到，它不会承认它，会给你一个错误，如：

灿“T绑定到‘routerLink’，因为它不是一个已知的性质‘A’

所以，当你看到，你马上知道，在这个模块的背景下，routerLink指令既没有宣布，也没有进口。

修复很简单：从CommonModule导出RouterModule，以便路由指令（如routerLink）可供所有其他模块使用。或者，您可以直接导入RouterModule。

@NgModule({ 
    declarations: [], 
    // you don't need anything here since this module has no templates for Angular to parse! 
    imports: [], 
    exports: [ 
     HttpModule, CommonModule, RouterModule 
    ] 
}) 
export class CommonModule { } 

要小心，不要使用RouterModule.forRoot()因为这是留给AppModule