Angular Routing uncaught error

问题

I have the following:

I am getting an error saying:

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>

However I declared it in my app.modules.ts:

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

In my HomeComponent.html I have the header:

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

However it is saying it recognize the property.

I have uploaded the code to GitHub: [GitHub][2]

------------Update 1---------------

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

I then imported it into app.module.ts

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

Errors:

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

    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'.

回答1:

This is because HomeComponent is declared in a Module that doesnt import the RouterModule. RouterLink is a directive that belongs to it.

To solve this, you could add RouterModule into the imports array of the HomeModule.

回答2:

To understand errors like this, it's good to know a bit about how Angular processes templates. The basic version is as follows:

Angular reads all the components, directives and pipes that imported modules export -- for instance when you import BrowserModule into your AppModule, all the components and directives of CommonModule will be read because BrowserModule exports CommonModule
Angular reads all the components, directives and pipes that are declared in the current module.

That lists makes up the context within which Angular operates when it scans your templates. This means that unless you declared a directive in your module or imported it from another module, when Angular comes across it in the module template, it won't recognize it and will give you an error such as:

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

So when you see that, you immediately know that in the context of this module, the routerLink directive was neither declared nor imported.

The fix is simple: Export RouterModule from your CommonModule so that routing directives (such as routerLink) will be available to all other modules. Alternatively, you could just import RouterModule directly.

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

Be careful not to use RouterModule.forRoot() since that is reserved for AppModule

来源：https://stackoverflow.com/questions/45870800/angular-routing-uncaught-error

标签

angular

angular2-routing