Angular 2 Ahead-of-Time 编译器：我必须公开所有类属性吗？

Posted 2023-03-13

【中文标题】Angular 2 Ahead-of-Time 编译器：我必须公开所有类属性吗？

【英文标题】：Angular 2 Ahead-of-Time compiler: must I make all class properties public?

【发布时间】：2017-01-15 15:51:27

【问题描述】：

Angular 2 rc 6, typescript 2, node 4.5.0, npm 2.15.9 Windows 7

我正在尝试从即时编译转变为提前编译，我依赖这些资源：

Angular 2 - Ahead-of-time compilation how to https://github.com/angular/angular/tree/master/modules/@angular/compiler-cli#angular-template-compiler

我知道我需要运行编译器ngc 来生成ngfactory.ts 文件，并且我需要更改main.ts 以使用platformBrowser 而不是platformBrowserDynamic 来引导。不过我遇到了障碍，不知道如何进行。

1.我已经确认应用程序使用即时编译运行没有错误。我的main.ts 是：

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

2.我从生产文件夹中清除所有应用文件，但保留第 3 方库（例如：Angular 2、Angular 2 Material）

3. 我运行 "node_modules/.bin/ngc" -p ./ 这运行时没有输出到控制台。我看到每个.ts 组件和模块都有一个.ngfactory.ts 文件。我还为每个包含组件样式的.css 看到了一个.css.shim.ts 文件。另外，.js和.js.map文件已经被转译，放在生产目录下

4.如果我此时尝试运行应用程序，我会看到所有包含组件模板的 .html 文件的 404 not found 错误

5. 我手动将所有模板文件 (.html) 移动到生产目录并运行应用程序。它运行良好，但仍然使用即时编译（255 个请求，包括compiler.umd.js）

6. 我将main.ts 更改为：

enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

就其本身而言，这并没有什么区别，因为新代码尚未编译。但是，我不知道从这里做什么。

我应该再次运行ngc 吗？如果是这样，我会收到很多类型的错误：

Error at C:/path/to/notify.component.ngfactory.ts:113:41: Property 'visible' is private and only accessible within class 'NotifyComponent'
... (many more like that with lots of properties from lots of components)
Compilation failed

使用 AoT 编译是否意味着我必须公开我的所有类属性？我错过了一步吗？

【参考方案1】：

对于一个给定的组件，其模板访问的所有成员（方法、属性）必须在提前编译场景中是公开的。这是因为模板变成了 TS 类。生成的类和组件现在是 2 个独立的类，您不能跨类访问私有成员。

简而言之：如果您想使用提前编译，则无法访问模板中的私有成员。

【讨论】：

我也是这么想的。希望 ionic 文档能更清楚地说明这一点，因为 convert private variable to public 听起来有点吓人

我希望模板 TS 类实现（继承？）相关的 Component 类。然后我们可以使用protected。

【参考方案2】：

同样如此，在 Angular 2 whit Ionic2 RC1 的最终版本中

Fields 的一种解决方法是使用不带 setter 的 getter

protected _myField: any;

get myField(): any  
  return this._myField; 

您还可以查看其他 JiT 到 AoT 的注意事项，以在 this blog of Isaac Mann 中调整您的代码

const lambda => 导出函数 默认导出 => 命名导出 对于从模板访问的任何成员，应将受保护的私有访问器更改为公共访问器 动态组件模板 => 静态模板 moduleId 应该在带有 templateUrl 的组件上设置