Angular Compiler选项

是使用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不会像在codegen模式中那样将代码转换为组件和模块ngfactories.相反,角度使用工厂的特殊包装,即

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.

供应商

如果我们有两个具有相同令牌的提供者,则第二个提供者“获胜”.

因此,提供商选项是覆盖默认COMPILER_PROVIDERS的一项很棒的功能

比如我们可以

1)自定义DomElementSchema

> Add custom elements and attributes to compiler schema

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

> Using DirectiveResolver to alter @Component metadata

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,编译发生在https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L326-L329 @NgModule提供程序解析之前https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L297

假设我们有app：

my-app
  level1
    level2
      level3

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

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

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

它将转变为

为了简化,我在图中省略了路由器出口喷油器.

有关更多详细信息,请参阅设计文档：

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