Angular 4：构建到产品：属性是私有的，只能在类中访问答案

【问题标题】：Angular 4 : Build to prod: Property is private and only accessible within classAngular 4：构建到产品：属性是私有的，只能在类中访问
【发布时间】：2018-01-01 10:36:52
【问题描述】：

我正在使用 Angular 4，我正在运行：ng build --prod

我明白了：

ng build --prod
Your global Angular CLI version (1.2.2) is greater than your local
version (1.0.0). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
Hash: 7fce5d10c4c3ac9745e8
Time: 68351ms
chunk    {0} polyfills.7790a64cc25c48ae62ea.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.f10680210e9e45ed33cc.bundle.js (main) 382 kB {3} [initial] [rendered]
chunk    {2} styles.d2e6408caea42ccabf99.bundle.css (styles) 175 bytes {4} [initial] [rendered]
chunk    {3} vendor.fc69ec31f7ef40b5fffb.bundle.js (vendor) 5.9 MB [initial] [rendered]
chunk    {4} inline.91747411075ce6c7f438.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in ng:///D:/Sources/DotNet/NextGCClientWeb/src/app/login/login.component.html (11,3): Property 'activatedRoute' is private and only accessible within class 'Login
Component'.

ERROR in ng:///D:/Sources/DotNet/NextGCClientWeb/src/app/login/login.component.html (11,3): Property 'activatedRoute' is private and only accessible within class 'Login
Component'.

这个错误似乎很奇怪：

ERROR in 
    ng:///D:/Sources/DotNet/NextGCClientWeb/src/app/login/login.component.html (11,3): Property 'activatedRoute' is private and only accessible within class 'Login Component

错误中指示的组件如下：

import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http, Response } from '@angular/http';
import { SessionService } from './../../shared/service';

import { User } from './../../model';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  error: string;
  email: string;
  password: string;
  stayConnected: Boolean;

  constructor (
    private sessionService: SessionService,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    if (activatedRoute.snapshot.params['keyWording']) {
      this.sessionService.logInWithFinalization(activatedRoute.snapshot.params['keyWording']);
    }
  }

  logIn() {
    this.sessionService.logIn(this.email, this.password, this.stayConnected).subscribe(
      () => {
        if (this.sessionService.pageRequestedInUnauthenticated == null) {
          this.router.navigate(['/welcome']);
        } else {
          this.router.navigate([this.sessionService.pageRequestedInUnauthenticated]);
        }
      },
      (error: Response) => this.error = error.json()
    );
  }
}

html 视图：

<div id="divLogin">
  <h1>Se connecter</h1><br>
  <i class="fa fa-envelope-o fa-lg" id="iconEmail"></i>
  <input type="text" id="email" [(ngModel)]="email" (keyup.enter)="logIn()" class="form-control" placeholder="Adresse email" autofocus />
  <i class="fa fa-lock fa-lg" id="iconPassword"></i>
  <input type="password" id="password" [(ngModel)]="password" (keyup.enter)="logIn()" class="form-control" placeholder="Mot de passe" />
  <button (click)="logIn()" class="btn btn-primary btn-block btn-lg">Connexion</button>
  <span id="containerStayConnected" title="Non implémenté"><input type="checkbox" id="stayConnected" [(ngModel)]="stayConnected" /><label for="stayConnected">Restez connecté</label></span>
  <a id="forgetPassword" title="Non implémenté">Mot de passe oublié</a><br><br><br>
  <a routerLink="/inscription">S'inscrire</a><br>
  {{ error }}
</div>

<div class="confirmationMessage" *ngIf="activatedRoute.snapshot.params['keyWording'] == 'validateInscription'"><br>Un lien de confirmation vous a été envoyé sur votre boîte email afin de valider votre compte. Merci.</div>

<div id="piedDePage"></div>

在运行 ng serve 时没有捕捉到它。

有什么建议吗？？

【问题讨论】：

@firaskoubaa，将private activatedRoute 更改为public activatedRoute。也许你的问题会得到解决。
属性activatedRoute 定义为private 和private activatedRoute: ActivatedRoute。

标签： javascript angular typescript webpack production-environment

【解决方案1】：

更改为公共激活路由

您需要将您的激活路由设置为public。这是使用 aot 构建生产时的清单。（取自这个 github 项目 https://github.com/asadsahi/AspNetCoreSpa，尽管它适用于任何其他 Angular 项目。）

AOT - 不要提前编译

不要对模板或样式使用 require 语句，使用 styleUrls 和 templateUrls，angular2-template-loader 插件会将其更改为 require 在构建时。
不要使用默认导出。
不要使用form.controls.controlName，使用form.get(‘controlName’)
不要使用 control.errors?.someError，使用 control.hasError('someError')
不要在提供程序、路由或声明中使用函数，导出函数然后引用该函数名称输入、输出、视图或内容子项、主机绑定以及您在模板中使用或为 Angular 注释的任何字段都应该是公开的

将激活路由保持私有

要保持您的激活路由私有，您可以执行以下操作

theData:any;
constructor (
private sessionService: SessionService,
private router: Router,
private activatedRoute: ActivatedRoute
 ) {
     this.activatedRoute.params.subscribe(
      params => {
        this.theData= params['keyWorking']; 
        //you will bind the theData instead of the activatedROute
      }
    );
}

}

在你的模板中

<div class="confirmationMessage" *ngIf="theData == 'validateInscription'">
<br>Un lien de confirmation vous a été envoyé sur votre boîte email afin de 
 valider votre compte. Merci.</div>

【讨论】：

但是为什么这种行为不成立呢？我的意思是为什么视图中我的私有成员的一部分通过验证，而另一部分抛出异常？他们俩有什么区别？？？
如果您只是在开发模式下运行（ ng serve ），它会通过，但如果您要在启用 aot 的情况下构建生产环境，则不会。
这不是我的问题，为什么在ng build - 我的部分私人成员可以在 html 中访问，而其他人则抛出错误。

【解决方案2】：

报告的原始“错误”不是错误，而是至少对于版本 2、4、5 的 AOT 的正常限制。模板中使用的变量需要声明为“public”。模板被视为一个单独的 Typescript 类。

您可以将所有组件变量从私有更改为公共。如果它们被用于您的模板。

或者您可以使用 ng build -prod --aot=false 进行构建

【讨论】：

【解决方案3】：

您正在尝试访问您已将其作为private 变量注入到您的constructor 中的activatedRoute。这意味着您在使用 AOT 时将无法从模板中访问它。

要么将其更改为 public activatedRoute，要么根本不使用模板中的它来解决此问题。

【讨论】：

【解决方案4】：

尝试使用“ng build -env=prod”命令。它对我来说解决了这个错误。

【讨论】：