21

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

我正在尝试从即时编译转移到提前编译,并且我依赖这些资源:

我知道我需要运行编译器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 ./这个运行没有输出到控制台。我看到我.ngfactory.ts的每个.ts组件和模块都有一个文件。我还看到.css.shim.ts每个包含.css组件样式的文件。另外,.js.js.map文件已被转译并放置在生产目录中

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

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 编译是否意味着我必须公开我的所有类属性?我错过了一步吗?

4

2 回答 2

39

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

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

于 2016-09-07T21:42:35.267 回答
4

在 Angular 2 whit Ionic2 RC1 的最终版本中也是如此

Fields 的解决方法可能是使用不带 setter 的 getter

protected _myField: any;

get myField(): any { 
  return this._myField; 
}

您还可以在Isaac Mann 的博客中查看其他从 JiT 到 AoT 的注意事项,以调整您的代码

  1. const lambda => 导出函数
  2. 默认导出 => 命名导出
  3. 对于从模板访问的任何成员,私有、受保护的访问器应更改为公共
  4. 动态组件模板 => 静态模板
  5. moduleId 应该在带有 templateUrl 的组件上设置
于 2016-11-05T21:31:08.930 回答