Angular 4 : Build to prod: 属性 是私有的,只能在 class 内访问
Angular 4 : Build to prod: Property is private and only accessible within class
我正在使用 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 没有捕捉到它。
有什么建议??
您正在尝试访问 activatedRoute
,您已将其作为 private
变量注入到 constructor
中。这意味着您将无法在使用 AOT 时从您的模板访问它。
将其更改为 public activatedRoute
或完全不使用模板来解决此问题。
更改为public激活的路由
您需要激活您的路线 public
。这是使用 aot 进行生产构建时的清单。 (取自此 github 项目 https://github.com/asadsahi/AspNetCoreSpa,尽管它适用于任何其他 angular 项目。)
AOT - 提前编译 DON'TS
- 不要对模板或样式使用 require 语句,使用 styleUrls 和
templateUrls,angular2-template-loader 插件会将其更改为 require
在构建时。
不要使用默认导出。
不要用form.controls.controlName,用form.get(‘controlName’)
不要使用control.errors?.someError,使用control.hasError('someError')
不要在你的提供者、路由或声明中使用函数,导出一个函数然后引用那个函数名
输入、输出、视图或内容子 (ren)、主机绑定和 您从模板中使用或为 Angular 注释的任何字段应为 public
保持激活路由私有
要让你的 activatedRoute 保持私密,你可以这样做
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>
请在 Property is private and only accessible within class
中查找更多详细信息
原来"error"报的不是错误,而是正常的AOT限制,至少2、4、5版本是这样。模板中使用的变量需要声明为"public"。模板被视为单独的 Typescript class.
您可以将所有组件变量从私有更改为 public。如果它们被用于您的模板。
或者您可以使用 ng build -prod --aot=false 进行构建
尝试使用“ng build -env=prod”命令。我解决了这个错误。
我正在使用 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 没有捕捉到它。
有什么建议??
您正在尝试访问 activatedRoute
,您已将其作为 private
变量注入到 constructor
中。这意味着您将无法在使用 AOT 时从您的模板访问它。
将其更改为 public activatedRoute
或完全不使用模板来解决此问题。
更改为public激活的路由
您需要激活您的路线 public
。这是使用 aot 进行生产构建时的清单。 (取自此 github 项目 https://github.com/asadsahi/AspNetCoreSpa,尽管它适用于任何其他 angular 项目。)
AOT - 提前编译 DON'TS
- 不要对模板或样式使用 require 语句,使用 styleUrls 和 templateUrls,angular2-template-loader 插件会将其更改为 require 在构建时。
不要使用默认导出。
不要用form.controls.controlName,用form.get(‘controlName’)
不要使用control.errors?.someError,使用control.hasError('someError')
不要在你的提供者、路由或声明中使用函数,导出一个函数然后引用那个函数名 输入、输出、视图或内容子 (ren)、主机绑定和 您从模板中使用或为 Angular 注释的任何字段应为 public
保持激活路由私有
要让你的 activatedRoute 保持私密,你可以这样做
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>
请在 Property is private and only accessible within class
中查找更多详细信息原来"error"报的不是错误,而是正常的AOT限制,至少2、4、5版本是这样。模板中使用的变量需要声明为"public"。模板被视为单独的 Typescript class.
您可以将所有组件变量从私有更改为 public。如果它们被用于您的模板。
或者您可以使用 ng build -prod --aot=false 进行构建
尝试使用“ng build -env=prod”命令。我解决了这个错误。