Angular从零到一1.6 引导过程

1.6　引导过程

Angular 2通过在main.ts中引导AppModule来启动应用。针对不同的平台，Angular提供了很多引导选项。下面的代码是通过即时（JiT）编译器动态引导，一般在进行开发调试时，默认采用这种方式：

//main.ts

import './polyfills.ts';

 

// 连同Angular编译器一起发布到浏览器

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

import { AppModule } from './app/';

 

if (environment.production) {

  enableProdMode();

}

//Angular编译器在浏览器中编译并引导该应用

platformBrowserDynamic().bootstrapModule(AppModule);

另一种方式是使用预编译器（Ahead-Of-Time，AoT）进行静态引导，静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备里或高延迟网络下。使用static选项，Angular编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是AppModuleNgFactory。引导预编译的AppModuleNgFactory的语法和动态引导AppModule类的方式很相似：

// 不把编译器发布到浏览器

import { platformBrowser } from '@angular/platform-browser';

 

// 静态编译器会生成一个AppModule的工厂AppModuleNgFactory

import { AppModuleNgFactory } from './app.module.ngfactory';

 

// 引导AppModuleNgFactory

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

看起来很头大是不是？好在我们在Angular-CLI中很少需要直接操作这些，后面会讲道，Angular-CLI专门为我们发布到生产环境提供了专门的命令，可以自动化地完成这些配置。这种便利性也是我们为什么推荐在Angular开发中使用Angular-CLI，它可以让你更多地去思考业务逻辑，而不是各种复杂的环境配置。