bootstrapModule背后的故事

bootstrapModule是PlatformRef的一个方法，这个方法中实现了Module的初始化、Component的初始化等，是Angular2的启动函数。
阅读代码我们可以发现真正调用的是_bootstrapModuleWithZone这个方法。

最开始干的事情

最开始会通过创建一个Compiler的实例，代码如下：

const compilerFactory: CompilerFactory = this.injector.get(CompilerFactory);
const compiler = compilerFactory.createCompiler(
        Array.isArray(compilerOptions) ? compilerOptions : [compilerOptions]);

首先通过Injector得到一个得到一个Compiler的Factory（看这里）。然后通过Factory
和option创建一个compiler用于Module和Component的编译。
Compiler的实际使用的是JitCompiler，通过JitCompilerFactory进行创建，创建的过程为：
1、根据option创建一个Injector
2、从创建的Injector中创建一个Compiler
所以Compiler也是通过Injector进行创建的，具体内容将在Injector部分具体分析。

编译过程

创建好Compiler后就可以对代码进行编译了：

return compiler.compileModuleAsync(moduleType)
    .then((moduleFactory) => this._bootstrapModuleFactoryWithZone(moduleFactory, ngZone));

这段代码的第一部分就是编译我们的代码，阅读代码可以发现它的调用路径为：

compileModuleAsync
         |
         +--->_compileModuleAndComponents
                       |
                       +--->_loadModules,_compileComponents,_compileModule

加载Module

在加载Module的时候，首先是通过getNgModuleMetadata方法获取Model的meta数据（meta数据是怎么来的），在这个方法中
会得到class通过NgModule注解修饰的信息。

if (meta.imports){
   ......
}
if (meta.exports){
   ......
}
if (meta.declarations){
   ......
}
if (meta.providers){
   ......
}
if (meta.entryComponents){
   ......
}
if (meta.bootstrap){
   ......
}
if (meta.schemas){
   ......
}

每一个判断语句内都是对各种信息的处理，最后把得到的信息组合成一个CompilerMeta。其中需要特别注意的是transitiveModule属性
这个属性记录了Module内使用到的各种信息，包括Module，Component，Provider，Pipe，Directive。
在获取了Module的Compiler信息后就需要进行加载了，

loadNgModuleDirectiveAndPipeMetadata(moduleType: any, isSync: boolean, throwIfNotFound = true):
    Promise {
  const ngModule = this.getNgModuleMetadata(moduleType, throwIfNotFound);
  const loading: Promise[] = [];
  if (ngModule) {
    ngModule.declaredDirectives.forEach((id) => {
      const promise = this._loadDirectiveMetadata(id.reference, isSync);
      if (promise) {
        loading.push(promise);
      }
    });
    ngModule.declaredPipes.forEach((id) => this._loadPipeMetadata(id.reference));
  }
  return Promise.all(loading);
}

通过代码可以看出：
1、加载通过declared声明的directive（包括Component）
2、加载pipe
这两步都是对使用到的类的元数据进行处理。

编译Component

加载完Module的全部信息后就要对Module中的Component进行编译，编译过程：
1、收集Module中的全部Component
2、收集每一个Component中使用到的entryComponents
3、收集Module中使用到的entryComponents
4、使用收集到的信息进行编译

if (!this._compilerConfig.useJit) {
  viewClass = interpretStatements(statements, compileResult.viewClassVar);
} else {
  viewClass = jitStatements(
      `/${identifierName(template.ngModule.type)}/${identifierName(template.compType)}/${template.isHost?'host':'component'}.ngfactory.js`,
      statements, compileResult.viewClassVar);
}

这是调用编译的入口，具体编译过程不再这里分析，两种编译方式的区别：使用jit会在客户端(浏览器)中生成具体的代码文件，可以在浏览器查看本地文件看到，不适用jit的方式则会编译保存在内存中。

编译Module

Module的编译过程和Component编译过程类似，首先进行数据收集和初始化，然后进行编译。

if (!this._compilerConfig.useJit) {
  ngModuleFactory =
      interpretStatements(compileResult.statements, compileResult.ngModuleFactoryVar);
} else {
  ngModuleFactory = jitStatements(
      `/${identifierName(moduleMeta.type)}/module.ngfactory.js`, compileResult.statements,
      compileResult.ngModuleFactoryVar);
}

也有jit和非jit两种方式，两种方式都会返回一个ModuleFactory作为最终的编译结果。

启动Module

编译完以后就会得到一个ModuleFactory，然后使用这个Factory来启动我们的程序。

return compiler.compileModuleAsync(moduleType)
    .then((moduleFactory) => this._bootstrapModuleFactoryWithZone(moduleFactory, ngZone));

这段函数的后半部分就是进行启动，其中用到的moduleFactory就是前半部分编译后得到的。
经过跳转后执行的代码：

private _moduleDoBootstrap(moduleRef: NgModuleInjector) {
  const appRef = moduleRef.injector.get(ApplicationRef);
  if (moduleRef.bootstrapFactories.length > 0) {
    moduleRef.bootstrapFactories.forEach((compFactory) => appRef.bootstrap(compFactory));
  } else if (moduleRef.instance.ngDoBootstrap) {
    moduleRef.instance.ngDoBootstrap(appRef);
  } else {
    throw new Error(
        `The module ${stringify(moduleRef.instance.constructor)} was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` +
        `Please define one of these.`);
  }
}

有两种方式进行bootstrap：
1、bootstrapFactories的长度大于0，使用appRef的bootstrap函数进行启动，当我们在NgModule中配置了bootstrap属性的时候，就会记录到这里来。
2、使用moduleRef.instance的ngDoBootstrap方法进行启动，这个moduleRef.instance就是我们的NgModule修饰的类。
如果上述两种都没有的话就会报错，所以在实现作为启动Module的时候，要么注解中配置bootstrap属性，要么类中定义ngDoBootstrap方法。
appRef实际是ApplicationRef_类的实例，bootstrap的代码为：

bootstrap(componentOrFactory: ComponentFactory|Type): ComponentRef {
  if (!this._initStatus.done) {
    throw new Error(
        'Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.');
  }
  let componentFactory: ComponentFactory;
  if (componentOrFactory instanceof ComponentFactory) {
    componentFactory = componentOrFactory;
  } else {
    componentFactory = this._componentFactoryResolver.resolveComponentFactory(componentOrFactory);
  }
  this._rootComponentTypes.push(componentFactory.componentType);
  const compRef = componentFactory.create(this._injector, [], componentFactory.selector);
  compRef.onDestroy(() => { this._unloadComponent(compRef); });
  const testability = compRef.injector.get(Testability, null);
  if (testability) {
    compRef.injector.get(TestabilityRegistry)
        .registerApplication(compRef.location.nativeElement, testability);
  }

  this._loadComponent(compRef);
  if (isDevMode()) {
    this._console.log(
        `Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.`);
  }
  return compRef;
}

在这段代码中主要干的事情有：
1、获取Component Factory
2、创建跟Component
3、注册测测试组件
4、加载Component
5、显示调试信息，在开发模式下每次启动时console中显示的那段话就是在这里打印的
加载Component的过程：

private _loadComponent(componentRef: ComponentRef): void {
  this.attachView(componentRef.hostView);
  this.tick();
  this._rootComponents.push(componentRef);
  // Get the listeners lazily to prevent DI cycles.
  const listeners =
      <((compRef: ComponentRef) => void)[]>this._injector.get(APP_BOOTSTRAP_LISTENER, [])
          .concat(this._bootstrapListeners);
  listeners.forEach((listener) => listener(componentRef));
}

1、把Component的vie和application进行关联
2、只是一个tick（todo：以后分析）
3、添加到跟Component列表中去（可以看出Angular2是支持多个跟节点的）
4、从Injector中获取APP_BOOTSTRAP_LISTENER名称的方法，然后调用。

总结

至此Angular2的整个启动过程主线就全部分析完了。