Angular 编译器选项

Question

我正在寻找一些 Angular 编译器选项 的解释 here:

useDebug - 打开调试
useJit - 不清楚（仅在 one place 中使用）
defaultEncapsulation - 设置默认样式封装
providers - 不太清楚（与 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 不会像在代码生成模式下那样将代码转换为组件和模块 ngfactories。相反 angular 为工厂使用特殊包装器，即

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

然后它会在每次必要时执行这些包装。（例如当你处理事件时，当 angular 是运行 updateDirectives, updateRenderer 等) 并且每次 StatementVisitor 将用于遍历所有语句。

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

提供商

如果我们有两个具有相同令牌的提供者，则第二个提供者"wins"。

所以 providers 选项是覆盖默认 COMPILER_PROVIDERS

的一个很好的功能

例如我们可以

1) 自定义 DomElementSchema

2) 使用特定的 DirectiveResolver 覆盖模板

3) 覆盖 ResourceLoader

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

4) 覆盖Parser、TemplateParser以可视化编译器的工作

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 and the compilation happens https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L326-L329 before @NgModule providers are resolved https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L297

假设我们有这样的应用程序：

my-app
  level1
    level2
      level3

那么依赖解析算法将如下所示：

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

my-app
  router-outlet
    level1
      router-outlet
        level2
          router-outlet
            level3

会转化为

为了简化，我在图中省略了 router-outlet 个喷油器。

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

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

Angular 编译器选项

Angular Compiler options

angular

angular-compiler

useJit

提供商