Angular Compiler选项

Question

我正在寻找列出here列出的 Angular Compiler选项的解释：

• useDebug - 打开调试
• useJit - 不清楚（仅在one place中使用）
• defaultEncapsulation - 设置默认样式封装
• 提供商 - 不太清楚（与ngModule装饰器是否相同？）
• missingTranslation - 策略如果缺少翻译密钥该怎么办
• enableLegacyTemplate - 支持template代码（已弃用）

Answer 1

useJit

是使用codegen还是解释模式。

Codegen 是默认模式，因此我们可以在浏览器开发工具中看到输出。在此模式下，angular将在编译期间收集的所有语句转换为具有浏览器内存中可执行代码的文件。

我知道使用此选项的三个地方

• 模块工厂生成https://github.com/angular/angular/blob/4.3.x/packages/compiler/src/jit/compiler.ts#L146

  ng:///AppModule/module.ngfactory.js

• 组件工厂生成https://github.com/angular/angular/blob/4.3.x/packages/compiler/src/jit/compiler.ts#L282

  ng:///AppModule/Component_Host.ngfactory.js

  ng:///AppModule/Component.ngfactory.js。

• styleUrls代码生成https://github.com/angular/angular/blob/4.3.x/packages/compiler/src/jit/compiler.ts#L307

  ng:///css/0app/app.css.ngstyle.js

解释模式 表示angular将像解释器一样工作。将直接执行先前步骤（词法分析，解析，语义分析，优化）中生成的语句。 Angular不会像在codegen模式中那样将代码转换为组件和模块ngfactories。相反，角度使用工厂的特殊包装，即

function _declareFn(
    varNames: string[], statements: o.Statement[], ctx: _ExecutionContext,
    visitor: StatementInterpreter): Function {
  return (...args: any[]) => _executeFunctionStatements(varNames, args, statements, ctx, visitor);
}

然后它会在每次必要时执行这些包装器。（例如，当你处理事件时，当角度运行updateDirectives，updateRenderer等）时每次{{ 1}}将用于遍历所有语句。

最初解释模式也用于StatementVisitor https://github.com/angular/angular/commit/2b34c88b69af8b0031fdb7006327bb8260e23dda#diff-ba3d6dc88c6e1cef871391a7843a614eR167但现在这种模式几乎不使用AFAIK。

提供商

如果我们有两个具有相同令牌的提供商，则第二个提供商＆＃34;赢得＆＃34; 。

因此，DART选项是覆盖默认COMPILER_PROVIDERS

的绝佳功能

例如我们可以

1）自定义providers

• Add custom elements and attributes to compiler schema

2）使用特定DomElementSchema覆盖模板

• Using DirectiveResolver to alter @Component metadata

3）覆盖DirectiveResolver

• https://github.com/angular/angular/issues/13286

4）覆盖ResourceLoader，Parser以可视化编译器的工作

• https://alexzuza.github.io/enjoy-ng-parser/

依旧......

我们不能对NgModule提供程序执行相同的操作，因为编译器使用专用注入器（下图中的JitCompiler注入器）https://github.com/angular/angular/blob/4.3.x/packages/compiler/src/jit/compiler_factory.ts#L115，并且在TemplateParser提供程序之前编译发生https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L326-L329已解决https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L297

让我们说我们有app：

@NgModule

然后依赖关系解析算法将如下所示：

如果我们对所有级别使用延迟加载https://plnkr.co/edit/AYExeiYRSQ4H8LiQEgKo?p=preview

my-app
  level1
    level2
      level3

它将转换为

为了简化我在图中省略了my-app router-outlet level1 router-outlet level2 router-outlet level3 个注射器。

有关详细信息，请参阅设计文档：

• https://docs.google.com/document/d/1OEUIwc-s69l1o97K0wBd_-Lth5BBxir1KuCRWklTlI4