typescript Angular 4:Build to prod:属性是私有的,只能在类中访问

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/45321295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:45:39  来源:igfitidea点击:

Angular 4 : Build to prod: Property is private and only accessible within class

javascriptangulartypescriptwebpackproduction-environment

提问by firasKoubaa

i'm using Angular 4 , i'm running : ng build --prod

我正在使用 Angular 4,我正在运行: ng build --prod

i'm catching this :

我抓住了这个:

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'.

this error seems to be strange :

这个错误似乎很奇怪:

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

The indicated component in the error is the follwoing :

错误中指示的组件如下:

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()
    );
  }
}

The html view:

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>

when running ng serveam not catching it .

运行ng serve时没有抓住它。

Any propositions ??

有什么建议??

回答by brijmcq

Changing to public activatedRoute

更改为公共激活路由

You need to make your activatedRoute public. Here's a checklist when building for production with aot. ( Taken from this github project https://github.com/asadsahi/AspNetCoreSpa, though it is applicable to any other angular project.)

你需要让你的 activateRoute public。这是使用 aot 构建生产时的清单。(取自这个 github 项目https://github.com/asadsahi/AspNetCoreSpa,尽管它适用于任何其他 angular 项目。)

AOT - Ahead of time compilation DON'TS

AOT - 提前编译不要

  • Don't use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
  • Don't use default exports.

  • Don't use form.controls.controlName, use form.get(‘controlName')

  • Don't use control.errors?.someError, use control.hasError(‘someError')

  • Don't use functions in your providers, routes or declarations, export a function and then reference that function name Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public

  • 不要对模板或样式使用 require 语句,使用 styleUrls 和 templateUrls,angular2-template-loader 插件会在构建时将其更改为 require。
  • 不要使用默认导出。

  • 不要使用 form.controls.controlName,使用 form.get('controlName')

  • 不要使用 control.errors?.someError,使用 control.hasError('someError')

  • 不要在您的提供者、路由或声明中使用函数,导出函数然后引用该函数名称 Inputs、Outputs、View 或 Content Child(ren)、Hostbindings,以及您从模板中使用或为 Angular 注释的任何字段上市

Keeping activatedRoute private

保持激活的路由私有

To keep your activatedRoute private, you can do something like this

为了保持你的激活路由私有,你可以做这样的事情

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
      }
    );
}

}

}

and in your template

并在您的模板中

<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>

回答by Henry Zhang

Please find more detail in Property is private and only accessible within class

请在Property is private 中找到更多详细信息,并且只能在课堂内访问

Original "error" reported is not an error, but normal restriction of AOT at least for versions 2, 4, 5. The variable used in the template needs to be declared as "public". Template is treated as a separate Typescript class.

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

You can change all the components variable from private to public. If they are used into your template.

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

Or you can use ng build -prod --aot=false for building

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

回答by SIddharth Pradhan

try with " ng build -env=prod " command. It worked for me to solve this error.

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

回答by Chrillewoodz

You're trying to access activatedRoutewhich you've injected into your constructoras a privatevariable. Meaning that you won't be able to access it from your template when using AOT.

您正在尝试访问activatedRouteconstructor作为private变量注入的内容。这意味着在使用 AOT 时您将无法从模板访问它。

Either change it to public activatedRouteor don't use it at all from the template to resolve this issue.

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