我正在寻找列出的一些Angular 编译器选项 的解释 here :
- useDebug - 打开调试
- useJit - 不清楚(仅在 one place 中使用)
- defaultEncapsulation - 设置默认样式封装
- providers - 不太清楚(与 ngModule 装饰器一样吗?)
- missingTranslation - 翻译键丢失时的策略
- enableLegacyTemplate - 支持
template
标签(已弃用)
最佳答案
使用Jit
是使用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#L307ng:///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。
提供商
如果我们有两个具有相同 token 的提供者,则第二个提供者“获胜”。
所以 providers
选项是一个很好的功能来覆盖默认 COMPILER_PROVIDERS
例如我们可以
1) 自定义DomElementSchema
2) 使用特定的DirectiveResolver
覆盖模板
3) 覆盖ResourceLoader
4) 重写Parser
,TemplateParser
以可视化编译器的工作
等等……
我们不能对 NgModule 提供者做同样的事情,因为编译器使用专用注入(inject)器(下图中的 JitCompiler 注入(inject)器)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
假设我们有这样的应用:
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
注入(inject)器。
有关详细信息,请参阅设计文档:
关于Angular 编译器选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45345163/