Angular 启动过程简析

引言

这篇文章简要介绍一下Angular应用程序的启动（Bootstrap）原理。这里的内容来源于网上的一些关于Angular的学习资料，只会涉及基本的原理和过程，不会涉及过于细节的源代码，感兴趣的话大家可以自己研究源代码。

目前的Angular的大版本是8，即将发布Angular 9，这篇文章是基于Angular 8的。

我们在开始学习Angular并动手做一些练习时，可能会好奇，一个简单的 ng serve命令背后发生了什么，让Angular程序能够开始运行，并在浏览器中呈现预期的页面。为什么自己写的Angular Component和Module等代码块会变成最终的、能被浏览器识别的代码。这些就是本文关注的问题。

原理

我们知道，Angular框架为了简化开发，提供了Module、Component以及Decorator等编程组件。由于这些特性都不是JavaScript原生的功能，浏览器是不认识的，因此程序跑起来前需要一次编译过程。这个过程就是由Angular Compiler完成，对应的工具就是ngc。至于说这个编译器做了什么事情，就跟Angular最终呈现DOM对象的机制有关。

DOM 模型

你可能听说过在React框架中采用了所谓的虚拟DOM（Virtual DOM） 的模型。它的基本原理是，当页面有元素的改动时，就会创建一个新的DOM对象，然后计算新旧DOM对象之间的差异。依据计算结果生成一个转换命令序列（Transformation Series），执行这个序列去更新DOM中需要改动的元素，这样就避免了整个DOM的刷新。

Angular没有采用这种方式，而是采用了一种称为增量DOM（Incremental DOM） 的模型。在这种模型下，每个组件都被编译成一系列JavaScript DOM API指令，包括创建元素的指令，以及更新元素的指令。当变更检测机制发现页面需要更新，只