angular 2 rc5 模板解析错误答案

【问题标题】：angular 2 rc5 template parse errorangular 2 rc5 模板解析错误
【发布时间】：2016-12-25 03:39:45
【问题描述】：

我在尝试创建角度路由链接时不断收到此错误：

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
</h1>
<button (click)="doLogin()">Login</button>
<a [ERROR ->][routerLink]="['/createservice']" href="#">Post a Service</a>
<router-outlet></router-outlet>
"): AppComponent@4:3 ; Zone: <root> ; Task: Promise.then ; Value: BaseExceptionconsoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): Template parse errors:(…)

这是我的代码：

<a [routerLink]="['/createservice']" href="#">Post a Service</a>

在我的组件中我有这个：

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  providers: [AngularFire],
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [RouterLink]
})

我也试过这个：

<a routerLink="/createservice" routerLinkActive="active">Post a Service</a>

按照本教程 (https://angular.io/docs/ts/latest/guide/router.html#!#router-link) 操作也不起作用。

这就是我引导我的应用程序的方式：

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    RouterModule,
    routing
  ],
  declarations: [ AppComponent, CreateServiceComponent ],
  providers: [ appRoutingProviders ],
  bootstrap: [ AppComponent,FIREBASE_PROVIDERS ]
})
export class MyAppModule {}

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [
  FIREBASE_PROVIDERS,
  defaultFirebase(firebaseConfig),
  firebaseAuthConfig({
  provider: AuthProviders.Facebook,
  method: AuthMethods.Popup
})]);

【问题讨论】：

您使用的是哪个 angular2 版本？
你在使用@NgModule 吗？请发布您如何引导您的应用程序。
@j2L4e 好的，我用我的引导方式更新了问题
你必须引导你的模块，而不是 AppComponent，platformBrowserDynamic().bootstrapModule(AppModule);

标签： angular angular2-routing angular2-template

【解决方案1】：

您不需要包含directives: [RouterLink]，要使用[routerLink]。它将通过您通过RouterModule.forRoot 进行的设置提供。

 @NgModule({
  ...
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(<route paths and configurations>)
   ],
   ....
 })

在任何功能模块中，您必须通过添加 RouterModule 来显式导入它。

希望这会有所帮助！

【讨论】：

我已经有了这个 export const routing = RouterModule.forRoot(appRoutes); app.routes.ts 内部