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 将它构建为生产时，我得到了错误：

ERROR in src/app/app.component.html(1,6): : Property 'navigationService' is private and only accessible within class 'AppComponent'.

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

Answer 1

为未来的读者添加答案。

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

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

另请检查 this 以了解 aot 中允许的内容和不允许的内容。

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

Angular: Injection does not build in production build

build

code-injection

angular