为啥即使模板访问私有属性，Angular AOT 也会编译？

Posted 2023-03-13

【中文标题】为啥即使模板访问私有属性，Angular AOT 也会编译？

【英文标题】：Why Angular AOT compiles even when templates are accessing private properties?为什么即使模板访问私有属性，Angular AOT 也会编译？

【发布时间】：2018-04-18 21:10:44

【问题描述】：

首先我想说我对 Ionic 和 Angular 都是全新的。请原谅我提出任何愚蠢的问题或评论。

好吧，我正在做一些测试以更好地了解 AOT 编译器如何与 Angular 和 Ionic 一起工作。

我遇到了这种情况，我有一个带有私有字段的组件，可以在我的模板中访问这些字段，但构建似乎仍然可以完美运行。据我了解，这应该会产生错误。

@IonicPage()
@Component(
selector: 'page-login',
templateUrl: 'login.html',
)
export class LoginPage 

private username : string;

private password : string;  

//etc etc

我的模板引用的字段如下：

<ion-input [(ngModel)]="username" name="username" type="text" required>
<ion-input [(ngModel)]="password" name="password" type="password" required>

然后，我运行下面的命令，没有出现错误：

ionic build --prod

Running app-scripts build: --prod
[22:13:51]  build prod started ... 
[22:13:51]  clean started ... 
[22:13:51]  clean finished in 1 ms 
[22:13:51]  copy started ... 
[22:13:51]  deeplinks started ... 
[22:13:51]  deeplinks finished in 44 ms 
[22:13:51]  ngc started ... 
[22:13:57]  ngc finished in 5.39 s 
[22:13:57]  preprocess started ... 
[22:13:57]  preprocess finished in less than 1 ms 
[22:13:57]  webpack started ... 
[22:13:57]  copy finished in 5.66 s 
[22:14:23]  webpack finished in 25.97 s 
[22:14:23]  uglify started ... 
[22:14:23]  sass started ... 
[22:14:24]  sass finished in 1.35 s 
[22:14:24]  cleancss started ... 
[22:14:25]  cleancss finished in 1.22 s 
[22:14:37]  uglify finished in 14.13 s 
[22:14:37]  postprocess started ... 
[22:14:37]  postprocess finished in 13 ms 
[22:14:37]  lint started ... 
[22:14:37]  build prod finished in 45.69 s 

我在 Angular github 中发现了同样情况的问题：https://github.com/angular/angular/issues/14739。

这个问题报告的是，该错误仅在第二次运行 ngc 时出现，因为在第一次运行时 ngc 会生成 ngfactories，并且仅在第二次运行时它会尝试将这些工厂转换为 javascript，然后检测到问题。

marlon@marlon-dell-5480 ~/ $ node_modules/.bin/ngc
marlon@marlon-dell-5480 ~/ $ node_modules/.bin/ngc
src/pages/login/login.ngfactory.ts:234:32: Property 'username' is private and only accessible within class 'LoginPage'.

如果团队中有人忘记了一些私有字段并默默地破坏了 AOT 构建，这种情况可能会成为问题。

面对这种情况：

为什么在我运行 ionic build 时 AOT 不报告任何错误？ 我是否需要调整任何设置以使 ionic-cli 显示错误？ 关于模板中访问的私有字段的使用，AOT 是否有任何变化？

【参考方案1】：

您在这里有一个替代方案。也就是说，如果您安装 Angular Language Service 扩展程序，您可以很容易地看到这些错误。

关于 HTML 代码：

VS 代码问题部分：