Angular：注入不会在生产构建中构建

Question

我正在使用 Angular 5.1.1。我有一个带有导航服务的应用程序，我将它注入到我的组件中。

服务

@Injectable()
export class NavigationService {
  ...
}

组件：

import { Component } from '@angular/core';
import { NavigationService } from './services/navigation.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
  providers: [NavigationService]
})
export class AppComponent {
  title = 'App Title';
  constructor(private navigationService: NavigationService) { }
}

<div *ngIf="navigationService.navigationModel != null">
  <app-navigation-head></app-navigation-head>
  <div class="flex-container">
    <div class="nav-container">
      <app-navigation-side></app-navigation-side>
    </div>
    <div class="page-container">
      <app-data-page></app-data-page>
    </div>
  </div>
</div>

当我使用 ng serve 运行应用程序时，一切都很好。当我用 ng build 构建它时。注入有效，应用程序运行良好。 但是当我想用 ng build --prod 将它构建为生产时，我得到了错误：

src/app/app.component.html(1,6) 中的错误：：属性“navigationService”是私有的，只能在“AppComponent”类中访问。

但是为什么呢？我注射有什么问题吗？

Answer 1

为未来的读者添加答案。

如果您在模板文件中使用变量navigationService，那么如果您使用aot 构建，则会出现错误。

建议但不是必须使用aot 进行生产。但是当你这样做时，请确保你的私有变量只能在同一个.ts 文件中访问。甚至来自.html 或模板文件。

还要检查this 以了解在 aot 中允许和不允许的内容。