创新互联Angular教程：Angular编译器选项

Angular 编译器选项

使用 AoT 编译 时，可以通过在 TypeScript 配置文件中 指定模板编译器选项来控制如何编译应用程序。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了乌海海南免费建站欢迎大家使用！

模板选项对象 ​angularCompilerOptions ​和为 TypeScript 编译器提供标准选项的 ​compilerOptions ​对象是兄弟。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    // ...
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    // ...
  }
}

用 extends 语法配置继承方式

像 TypeScript 编译器一样，Angular 的 AOT 编译器也支持对 TypeScript 配置文件中的 ​angularCompilerOptions ​进行 ​extends​。​extends ​属性位于顶层，和 ​compilerOptions ​和 ​angularCompilerOptions ​平级。

使用 ​extends ​属性，TypeScript 配置可以从另一个文件中继承设置。首先从基础文件中加载配置项，然后被继承自它的配置文件中的配置项覆写。

比如：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "outDir": "./out-tsc/app",
    // ...
    "angularCompilerOptions": {
      "strictTemplates": true,
      "preserveWhitespaces": true,
      // ...
    },
  }

欲知详情，参阅 TypeScript 手册。

模板选项

以下选项可用于配置 AoT 模板编译器。

allowEmptyCodegenFiles

如果为 ​true​，则生成所有可能的文件 —— 即使它们为空。默认值为 ​false​。Bazel 的构建规则使用它来简化 Bazel 规则跟踪文件依赖性的方式。不要在 Bazel 规则之外使用此选项。

annotationsAs

修改 Angular 专有注解的生成方式，以改善摇树优化。非 Angular 注解不受影响。可选值为 ​static fields​（默认值）或 ​decorators​。

  • 默认情况下，编译器会用类中的静态字段替换装饰器，这允许像 Closure 编译器 这样的高级摇树器删除未使用的类。
  • ​decorators ​值会将装饰器保留在原处，这将使编译速度更快。TypeScript 会生成对辅助器 ​__decorate​ 的调用。使用 ​--emitDecoratorMetadata​ 以支持运行时反射。

    • 注意：

    这样生成的代码将无法被正确地摇树优化。

annotateForClosureCompiler

如果为 ​true​，则使用 Tsickle 来用 JSDoc 对生成的 JavaScript 代码进行注解，这些注释是供 Closure 编译器 使用的。默认值为 ​false​。

compilationMode

指定要使用的编译模式。可以使用以下模式：

模式

详情
'full'

根据当前使用的 Angular 版本生成完全 AOT 编译的代码。
'partial'

生成稳定的中间代码，适用于已发布的库。

默认值为 'full'。

disableExpressionLowering

如果为 ​true​（默认值），则转换在注解中使用或允许使用的代码，以允许从模板的工厂模块导入代码。

如果为 ​false​，则禁用此重写，你必须手动进行重写。

disableTypeScriptVersionCheck

如果为 ​true​，则在使用不受支持的 TypeScript 版本时，编译器不会检查 TypeScript 版本，并且不会报错。不建议使用，因为不受支持的 TypeScript 版本可能具有未定义的行为。默认值为 ​false​。

enableI18nLegacyMessageIdFormat

指示 Angular 模板编译器为模板中用 ​i18n ​属性标出的消息生成旧版 ID。

除非你的项目依赖先前已用旧版 ID 生成的翻译，否则请将此选项设置为 ​false​。默认值为 ​true​。

Ivy 之前版本的消息提取工具为所提取的消息 id 生成了多种旧格式。这些消息格式存在许多问题，比如对空白字符的处理和对模板原始 HTML 内部信息的依赖。

新的消息格式对空白字符的改动更宽容，在所有翻译文件格式中都相同，并且可以直接通过调用 ​$localize​ 生成。这允许应用程序代码中的 ​$localize​ 消息使用与组件模板中 ​i18n ​消息完全相同的 id。

enableResourceInlining

当为 ​true ​时，将所有 ​@Component​ 装饰器中的 ​templateUrl ​和 ​styleUrls ​属性替换为 ​template ​和 ​styles ​属性中的内联内容。

启用后，​ngc ​的 ​.js​ 输出不会包含任何惰性加载的模板或样式 URL。

对于使用 CLI 生成的库项目，dev 配置下默认为 ​true​。

enableLegacyTemplate

如果为 ​true​，则启用 Angular 4.0 中为了避免与同名的 DOM 元素冲突而不推荐使用的 ​