Angular 2 引导选项 - AOT 与 JIT答案

【问题标题】：Angular 2 Bootstrapping Options - AOT vs JITAngular 2 引导选项 - AOT 与 JIT
【发布时间】：2017-04-24 08:04:56
【问题描述】：

刚开始使用 Angular 2。

angular 2 中有哪些不同的 Bootstrapping 选项？
为什么当我进行更改并刷新 index.html 时检索 HTML 标记的时间很短？
它们之间的区别

【问题讨论】：

FWIW 还有我在其他答案中没有看到的 Angular Universal - 所以基本上引导初始页面/模块/任何服务器端，然后在应用程序加载到客户。

标签： angular jit angular2-aot angular2-bootstrapping

【解决方案1】：

有两种选择

动态引导
- 编译器使用 JIT（及时）。
- 在浏览器中动态编译ts文件。
- 这就是 index.html 检索标记花费很少时间的原因。
- main.ts 包含以下内容
```
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
```
  1. 静态引导
- 编译器使用了AoT（提前）。
- ts文件被编译成js文件，然后渲染到浏览器上。
- 通过这种方式，通过使它们变得轻量级，在其中创建了一组包含模块和工厂的 js 文件。
- 主要用于移动设备和传统网络。
- main.ts 包含以下内容
```
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory }              from '../aot/app/app.module.ngfactory';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
```

差异

【讨论】：

您可能会提到，AoT 中的所有这些好处都需要更长的编译时间。 angular-cli 女巫也支持 AoT，使其在开发过程中不明显

【解决方案2】：

在 Angular 中有两种编译方式

JIT - 即时编译 AOT
提前编译

我想补充一下 JIT 与 AOT 编译的四个主要区别

|----------------------------------------|---------------------------------------------|
|                    JIT                 |                   AOT                       |
|----------------------------------------|---------------------------------------------|
| JIT compilation as the name implies,   | AOT compilation compiles the application at |
| compiles  the application Just in Time | build time                                  |
| in the browser at runtime              |                                     |
|----------------------------------------|---------------------------------------------|
|For JIT compilation the browser needs to| AOT compilation it does not have to         |
|download the angular compiler           |                                             |
|----------------------------------------|---------------------------------------------|
|While the application is being JIT      | With AOT, the application is precompiled    | 
|compiled in the browser, users have     | so there no such wait                       |
|to wait                                 |                                             |
|----------------------------------------|---------------------------------------------|
|With JIT compilation, the template      | With AOT compilation we will come to        |
|binding errors are only know at runtime | now about them at build time.               |
|----------------------------------------|---------------------------------------------|

以下2条命令默认使用JIT编译

ng build
ng serve

使用这些命令中的任何一个，我们都可以使用 - -aot 选项来打开 AOT

ng build --aot
ngserve --aot

要为生产版本关闭 ACT，请将 - - aot 选项设置为 false

 ng build -- prod --aot false

【讨论】：

这个答案有什么意义？问题是关于使用 platformBrowser/platformBrowserDynamic 进行引导