带有箭头函数的 Angular 7 生产构建 (AOT)

Question

我现在使用 Angular JS 和 Angular 2+（混合应用程序）工作了 3 年，现在尝试使用 Angular CLI。 我想我对 JIT 和 AOT 非常了解。

https://angular.io/guide/aot-compiler

...说，“AOT 编译器不支持函数表达式和箭头函数”。 “ng build --prod”将使用 AOT 构建应用程序。

我的场景：

我创建了一个新项目，实现了一个箭头函数，里面有console.log 的东西。 如果我使用“ng build --prod”构建应用程序，应用程序工作正常（从 /dist 文件夹开始）并且会打印 console.log。 我还使用 webpack 包分析器对其进行了分析，并且包中没有编译器或其他东西（如 AOT 应用程序）。

我的问题：

那么，应用程序如何工作？ 为什么这个箭头函数有效？ 为什么“ng build --prod”没有打印错误？

我想我的头前有一块板。

Answer 1

AOT 收集器不支持元数据表达式中的箭头函数 () => new Server() 。 感谢@R.Richards。

Answer 2

以下语法将起作用，并且不会在AOT 中出现任何错误

arrowFun = () => { };

但根据文档它的元数据表达

AOT 收集器不支持元数据表达式中的箭头函数 () => new Server()。 它生成一个错误节点来代替函数。 当编译器稍后解释此节点时，它会报告一个错误，邀请您将箭头函数转换为导出函数。

你可以在这里阅读

从文档

AOT 编译器不支持函数表达式和箭头函数，也称为 lambda 函数。

考虑以下组件装饰器：

@Component({
  ...
  providers: [{provide: server, useFactory: () => new Server()}]
})

这将引发错误，要解决此问题，您可以使用

export function serverFactory() {
  return new Server();
}

@Component({
  ...
  providers: [{provide: server, useFactory: serverFactory}]
})

在版本 5 及更高版本中，编译器在发出 .js 文件时自动执行此重写。