Angular13 Angular 预先编译

预先（AOT）编译器

Angular 应用主要由组件及其 HTML 模板组成。由于浏览器无法直接理解 Angular 所提供的组件和模板，因此 Angular 应用程序需要先进行编译才能在浏览器中运行。

在浏览器下载和运行代码之前的编译阶段，Angular 预先（AOT）编译器会先把你的 Angular HTML 和 TypeScript 代码转换成高效的 JavaScript 代码。在构建期间编译应用可以让浏览器中的渲染更快速。

本指南中解释了如何指定元数据，并使用一些编译器选项以借助 AOT 编译器来更有效的编译应用。

观看 Alex Rickabaugh 在 AngularConnect 2019 解释 Angular 编译器的演讲。

下面是你可能要使用 AOT 的部分原因。

选择编译器

Angular 提供了两种方式来编译你的应用：

当运行 CLI 命令 ​ng build​ (只构建) 或 ​ng serve​ (构建并启动本地服务器) 时，编译类型（JIT 或 AOT）取决于你在 ​angular.json​ 中的构建配置所指定的 ​aot ​属性。默认情况下，对于新的 CLI 应用，其 ​aot ​为 ​true​。

AOT 工作原理

Angular AOT 编译器会提取元数据来解释应由 Angular 管理的应用程序部分。你可以在装饰器（比如 ​@Component()​ 和 ​@Input()​）中显式指定元数据，也可以在被装饰的类的构造函数声明中隐式指定元数据。元数据告诉 Angular 要如何构造应用程序类的实例并在运行时与它们进行交互。

在下列范例中，​@Component()​ 元数据对象和类的构造函数会告诉 Angular 如何创建和显示 ​TypicalComponent ​的实例。

@Component({
  selector: 'app-typical',
  template: '<div>A typical component for {{data.name}}</div>'
})
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { … }
}

Angular 编译器只提取一次元数据，并且为 ​TypicalComponent ​生成一个工厂。当它需要创建 ​TypicalComponent ​的实例时，Angular 调用这个工厂，工厂会生成一个新的可视元素，并且把它（及其依赖）绑定到组件类的一个新实例上。

编译的各个阶段

AOT 编译分为三个阶段。

元数据的限制

你只能使用 TypeScript 的一个子集书写元数据，它必须满足下列限制：

• 表达式语法只支持 JavaScript 的一个有限的子集
• 只能引用代码收缩后导出的符号

• 只能调用编译器支持的函数

• 被装饰和用于数据绑定的类成员必须是公共（public）的

关于准备 AOT 编译应用程序的其它准则和说明，参阅 Angular：编写 AOT 友好的应用程序。

AOT 编译中的错误通常是由于元数据不符合编译器的要求而发生的（下面将更全面地介绍）。

配置 AOT 编译

你可以在 ​tsconfig.json​ TypeScript 配置文件中提供控制编译过程的选项。

阶段 1：分析

TypeScript 编译器会做一些初步的分析工作，它会生成类型定义文件​.d.ts​，其中带有类型信息，Angular 编译器需要借助它们来生成代码。 同时，AOT 收集器（collector） 会记录 Angular 装饰器中的元数据，并把它们输出到​.metadata.json​文件中，和每个 ​.d.ts​ 文件相对应。

你可以把 ​.metadata.json​ 文件看做一个包括全部装饰器的元数据的全景图，就像抽象语法树 (AST)一样。

Angular 的 ​schema.ts​ 会将 JSON 格式描述为 TypeScript 接口的集合。

表达式语法限制

AOT 收集器只能理解 JavaScript 的一个子集。定义元数据对象时要遵循下列语法限制：

如果表达式使用了不支持的语法，收集器就会往 ​.metadata.json​ 文件中写入一个错误节点。稍后，如果编译器用到元数据中的这部分内容来生成应用代码，它就会报告这个错误。

如果你希望 ​ngc ​立即汇报这些语法错误，而不要生成带有错误信息的 ​.metadata.json​ 文件，可以到 TypeScript 的配置文件中设置 ​strictMetadataEmit ​选项。

"angularCompilerOptions": {
  …
  "strictMetadataEmit" : true
}

Angular 库通过这个选项来确保所有的 Angular ​.metadata.json​ 文件都是干净的。当你要构建自己的代码库时，这也同样是一项最佳实践。

不要有箭头函数

AOT 编译器不支持函数表达式和箭头函数，也叫 lambda 函数。

考虑如下组件装饰器：

@Component({
  …
  providers: [{provide: server, useFactory: () => new Server()}]
})

AOT 的收集器不支持在元数据表达式中出现箭头函数 ​() => new Server()​。它会在该函数中就地生成一个错误节点。稍后，当编译器解释该节点时，它就会报告一个错误，让你把这个箭头函数转换成一个导出的函数。

你可以把它改写成这样来修复这个错误：

export function serverFactory() {
  return new Server();
}
@Component({
  …
  providers: [{provide: server, useFactory: serverFactory}]
})

在版本 5 和更高版本中，编译器会在发出 ​.js​ 文件时自动执行此重写。

代码折叠

编译器只会解析到已导出符号的引用。收集器可以在收集期间执行表达式，并用其结果记录到 ​.metadata.json​ 中（而不是原始表达式中）。这样可以让你把非导出符号的使用限制在表达式中。

比如，收集器可以估算表达式 ​1 + 2 + 3 + 4​ 并将其替换为结果 ​10​。这个过程称为​折叠​。可以用这种方式简化的表达式是可折叠的。

收集器可以计算对模块局部变量的 ​const ​声明和初始化过的 ​var ​和 ​let ​声明，并从 ​.metadata.json​ 文件中移除它们。

考虑下列组件定义：

const template = '<div>{{hero.name}}</div>';
@Component({
  selector: 'app-hero',
  template: template
})
export class HeroComponent {
  @Input() hero: Hero;
}

编译器不能引用 ​template ​常量，因为它是未导出的。但是收集器可以通过内联 ​template ​常量的方式把它折叠进元数据定义中。最终的结果和你以前的写法是一样的：

@Component({
  selector: 'app-hero',
  template: '<div>{{hero.name}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}

这里没有对 ​template ​的引用，因此，当编译器稍后对位于 ​.metadata.json​ 中的收集器输出进行解释时，不会再出问题。

你还可以通过把 ​template ​常量包含在其它表达式中来让这个例子深入一点：

const template = '<div>{{hero.name}}</div>';
@Component({
  selector: 'app-hero',
  template: template + '<div>{{hero.title}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}

收集器把该表达式缩减成其等价的已折叠字符串：

'<div>{{hero.name}}</div><div>{{hero.title}}</div>'

可折叠的语法

下表中描述了收集器可以折叠以及不能折叠哪些表达式：

如果表达式是不可折叠的，那么收集器就会把它作为一个 AST（抽象语法树）写入 ​.metadata.json​ 中，留给编译器去解析。

阶段 2：代码生成

收集器不会试图理解它收集并输出到 ​.metadata.json​ 中的元数据，它所能做的只是尽可能准确的表述这些元数据，并在检测到元数据中的语法违规时记录这些错误。解释这些 ​.metadata.json​ 是编译器在代码生成阶段要承担的工作。

编译器理解收集器支持的所有语法形式，但是它也可能拒绝那些虽然语法正确但语义违反了编译器规则的元数据。

公共符号

编译器只能引用已导出的符号。

• 带有装饰器的类成员必须是公开的。你不可能把一个私有或内部使用的属性做成 ​@Input()​。
• 数据绑定的属性同样必须是公开的

支持的类和函数

只要语法有效，收集器就可以用 ​new ​来表示函数调用或对象创建。但是，编译器在后面可以拒绝生成对特定函数的调用或对特定对象的创建。

编译器只能创建某些类的实例，仅支持核心装饰器，并且仅支持对返回表达式的宏（函数或静态方法）的调用。

函数和静态方法调用

收集器接受任何只包含一个 ​return ​语句的函数或静态方法。编译器也支持在返回表达式的函数或静态函数中使用宏。

考虑下面的函数：

export function wrapInArray<T>(value: T): T[] {
  return [value];
}

你可以在元数据定义中调用 ​wrapInArray​，因为它所返回的表达式的值满足编译器支持的 JavaScript 受限子集。

你还可以这样使用 ​wrapInArray()​：

@NgModule({
  declarations: wrapInArray(TypicalComponent)
})
export class TypicalModule {}

编译器会把这种用法处理成你以前的写法：

@NgModule({
  declarations: [TypicalComponent]
})
export class TypicalModule {}

Angular 的 ​RouterModule ​导出了两个静态宏函数 ​forRoot ​和 ​forChild​，以帮助声明根路由和子路由。 查看这些方法的源码，以了解宏函数是如何简化复杂的 ​NgModule ​配置的。

元数据重写

编译器会对含有 ​useClass​、​useValue​、​useFactory ​和 ​data ​的对象字面量进行特殊处理，把用这些字段之一初始化的表达式转换成一个导出的变量，并用它替换该表达式。这个重写表达式的过程，会消除它们受到的所有限制，因为编译器并不需要知道该表达式的值，它只要能生成对该值的引用就行了。

你可以这样写：

class TypicalServer {
}
@NgModule({
  providers: [{provide: SERVER, useFactory: () => TypicalServer}]
})
export class TypicalModule {}

如果不重写，这就是无效的，因为这里不支持 Lambda 表达式，而且 ​TypicalServer ​也没有被导出。为了支持这种写法，编译器自动把它重写成了这样：

class TypicalServer {
}
export const θ0 = () => new TypicalServer();
@NgModule({
  providers: [{provide: SERVER, useFactory: θ0}]
})
export class TypicalModule {}

这就让编译器能在工厂中生成一个对 ​θ0​ 的引用，而不用知道 ​θ0​ 中包含的值到底是什么。

编译器会在生成 ​.js​ 文件期间进行这种重写。它不会重写 ​.d.ts​ 文件，所以 TypeScript 也不会把这个变量当做一项导出，因此也就不会污染 ES 模块中导出的 API。

阶段 3：模板类型检查

Angular 编译器最有用的功能之一就是能够对模板中的表达式进行类型检查，在由于出错而导致运行时崩溃之前就捕获任何错误。在模板类型检查阶段，Angular 模板编译器会使用 TypeScript 编译器来验证模板中的绑定表达式。

通过在该项目的 TypeScript 配置文件中的 ​"angularCompilerOptions"​ 中添加编译器选项 ​"fullTemplateTypeCheck"​，可以显式启用本阶段。

当模板绑定表达式中检测到类型错误时，进行模板验证时就会生成错误。这和 TypeScript 编译器在处理 ​.ts​ 文件中的代码时报告错误很相似。

比如，考虑下列组件：

@Component({
  selector: 'my-component',
  template: '{{person.addresss.street}}'
})
class MyComponent {
  person?: Person;
}

这会生成如下错误：

my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'?

错误信息中汇报的文件名 ​my.component.ts.MyComponent.html​ 是一个由模板编译器生成出的合成文件，用于保存 ​MyComponent ​类的模板内容。编译器永远不会把这个文件写入磁盘。这个例子中，这里的行号和列号都是相对于 ​MyComponent ​的 ​@Component​ 注解中的模板字符串的。如果组件使用 ​templateUrl ​来代替 ​template​，这些错误就会在 ​templateUrl ​引用的 HTML 文件中汇报，而不是这个合成文件中。

错误的位置是从包含出错的插值表达式的那个文本节点开始的。如果错误是一个属性绑定，比如 ​[value]="person.address.street"​，错误的位置就是那个包含错误的属性的位置。

验证使用 TypeScript 类型检查器和提供给 TypeScript 编译器的选项来控制类型验证的详细程度。比如，如果指定了 ​strictTypeChecks​，则会报告错误以及下述错误消息。

my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'

类型窄化

在 ​ngIf ​指令中使用的表达式用来在 Angular 模板编译器中窄化联合类型，就像 TypeScript 中的 ​if ​表达式一样。比如，要在上述模板中消除 ​Object is possibly 'undefined'​ 错误，可以把它改成只在 ​person ​的值初始化过的时候才生成这个插值。

@Component({
  selector: 'my-component',
  template: ' {{person.address.street}} '
})
class MyComponent {
  person?: Person;
}

使用 ​*ngIf​ 能让 TypeScript 编译器推断出这个绑定表达式中使用的 ​person ​永远不会是 ​undefined​。

非空类型断言操作符

使用 非空类型断言操作符 可以在不方便使用 ​*ngIf​ 或 当组件中的某些约束可以确保这个绑定表达式在求值时永远不会为空时，防止出现 ​Object is possibly 'undefined'​ 错误。

在下面的例子中，​person ​和 ​address ​属性总是一起出现的，如果 ​person ​非空，则 ​address ​也一定非空。没有一种简便的写法可以向 TypeScript 和模板编译器描述这种约束。但是这个例子中使用 ​address!.street​ 避免了报错。

@Component({
  selector: 'my-component',
  template: '<span *ngIf="person"> {{person.name}} lives on {{address!.street}} </span>'
})
class MyComponent {
  person?: Person;
  address?: Address;
  setData(person: Person, address: Address) {
    this.person = person;
    this.address = address;
  }
}

应该保守点使用非空断言操作符，因为将来对组件的重构可能会破坏这个约束。

这个例子中，更建议在 ​*ngIf​ 中包含对 ​address ​的检查，代码如下：

@Component({
  selector: 'my-component',
  template: '<span *ngIf="person && address"> {{person.name}} lives on {{address.street}} </span>'
})
class MyComponent {
  person?: Person;
  address?: Address;
  setData(person: Person, address: Address) {
    this.person = person;
    this.address = address;
  }
}