prod环境中抛出的异常:模板解析错误:无法绑定到'routerLink',因为它不是已知的本机属性

时间:2016-07-25 20:53:39

标签: angular angular2-template angular-cli

我的 angular CLI生成的应用程序在dev环境中正常运行,但当我通过生成应用程序切换到prod环境时:

ng build -prod

我得到以下异常:

Template parse errors: Can't bind to 'routerLink' since it isn't a known native property

我怀疑缩小/破坏有什么问题......

有人可以帮忙吗?我的ng CLI版本是 1.0.0-beta.10

编辑1 :这是我的main.ts

import {bootstrap} from "@angular/platform-browser-dynamic";
import {enableProdMode} from "@angular/core";
import {Title} from "@angular/platform-browser";
import {provideRouter} from "@angular/router";
import {LocationStrategy, HashLocationStrategy} from "@angular/common";
import {HTTP_PROVIDERS, Http, RequestOptions} from "@angular/http";
import {
  TRANSLATE_PROVIDERS,
  TranslateService,
  TranslateLoader,
  TranslateStaticLoader
} from "ng2-translate/ng2-translate";
import {AppComponent} from "./app/app.component";
import {SessionService} from "./app/session/session.service";
import {UserAccountService} from "./app/useraccount/useraccount.service";
import {ApplicationRequestOptions} from "./app/session/session.utils";
import {StylingService} from "./app/shared/services/styling.service";
import {AppRoutes} from "./app/routes/app.routes";
import {environment} from "./app/environment";
import {FormBuilder, REACTIVE_FORM_DIRECTIVES, provideForms, disableDeprecatedForms} from "@angular/forms";
import {PasswordValidationService} from "./app/shared/services/password-validation.service";
import {validatePassword} from "./app/shared/validators/password.validator";

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

bootstrap(AppComponent, [
  provideRouter(AppRoutes),
  HTTP_PROVIDERS,
  TRANSLATE_PROVIDERS,
  Title,
  FormBuilder,
  REACTIVE_FORM_DIRECTIVES,
  SessionService,
  UserAccountService,
  StylingService,
  TranslateService,
  PasswordValidationService,
  disableDeprecatedForms(),
  provideForms(),
  {provide: RequestOptions, useClass: ApplicationRequestOptions},
  {provide: LocationStrategy, useClass: HashLocationStrategy},
  {
    provide: TranslateLoader,
    useFactory: (http:Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'), deps: [Http]
  }
]);

和我的app.component.ts

import {Title} from "@angular/platform-browser";
import {Component, OnInit} from "@angular/core";
import {ROUTER_DIRECTIVES, ActivatedRoute} from "@angular/router";
import {TranslateService} from "ng2-translate/ng2-translate";
import {NavbarComponent} from "./shared/components/navbar.component";
import {FooterComponent} from "./shared/components/footer.component";
import {SigninComponent} from "./session/session.signin.component";
import {HomeComponent} from "./home/components/home.component";
import {SessionService} from "./session/session.service";
import "moment/locale/fr";
import * as moment from "moment";

@Component({
  selector: 'app',
  template: `
              <section class="container-fluid row Conteneur">
                 <navbar></navbar>
                 <section class="container">
                    <router-outlet (onActivate)="setTitle($event)"></router-outlet>
                 </section>
              </section>
              <section class="container-fluid">  
                <footer></footer>
              </section>
              `,
  directives: [NavbarComponent, FooterComponent, SigninComponent, HomeComponent, ROUTER_DIRECTIVES]
})
export class AppComponent implements OnInit {

  constructor(private translate:TranslateService,
              private sessionService:SessionService,
              private titleService:Title,
              private activatedRoute:ActivatedRoute) {
    let userLang = 'fr';
    translate.use(userLang);
    moment.locale(userLang);
  }

  ngOnInit() {
    this.sessionService.reloadPersonalInfo();
  }

  setTitle($event) {
    this.translate.get(this.activatedRoute.snapshot.data['titleKey'])
      .subscribe(translation=>this.titleService.setTitle(translation));
  }
}

这是我的家庭组件模板:

<div>
<a [routerLink]="['/signin']">signin</a>
</div>

和班级:

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';


@Component({
  moduleId: module.id,
  templateUrl: 'home.component.html',
  directives: [ROUTER_DIRECTIVES]
})

export class HomeComponent {
}

0 个答案:

没有答案