Angular AOT意外行为

Question

这来自我在其中一个项目中遇到的类似错误，但由于它已修复，我只是想知道它为什么会发生。

在Typescript中，当使用常量字符串枚举时，它会被编译为字符串，或者具有该字符串属性的对象。

See an example here

And another one here。 （要查看已编译的JS，请单击JS（Typescript）旁边的箭头，然后选择＆＃34;查看编译的JS＆＃34;）

当使用const枚举值时，至少如果你AOT优化你的角度构建，enum会被完全丢弃并被字符串替换。

Check out this example

正如您将看到的，它在stackblitz中运行良好，因为它在没有优化的情况下进行编译。

如果您下载它并使用ng build --prod构建它，因为它还会激活--build-optimizer和--aot，部署的构建将在运行时崩溃。

这是angular.io's animations documentation上的一个简单示例。

我修改的内容是/src/app/hero-list-basic.component.ts, 第15,44,48,60行。

如果查看已编译的JS包，您将看到枚举未在任何地方定义。这与现有的引用无关（正如您在第60行的构造函数中看到的那样）。显然，内联构建用相应的字符串替换枚举，就像TS Playground中的TS编译器一样。

我的问题是，在装饰器（@Component）中，您将看到它不是内联的，而是null。我的bundle.js中的位置是〜第6557行。

（带有name: "active" @ line 6569的行有一个值，因为我没有在该构建中将其从字符串更改为枚举，忽略它）

这是TS编译器，AOT编译器，一些webpack插件（用于缩小/ uglification）的错误，或者我只是因为对此进行调查而感到愚蠢？提前感谢您的意见！

Answer 1

Angular Ahead of Time（AOT）编译器在浏览器下载并运行该代码之前，在构建阶段将Angular HTML和TypeScript代码转换为高效的JavaScript代码。

Angular应用程序主要由组件及其HTML模板组成。在浏览器呈现应用程序之前，必须通过Angular编译器将组件和模板转换为可执行JavaScript。

Angular提供了两种编译应用程序的方法：

即时（JIT），它在运行时在浏览器中编译您的应用程序 Ahead-of-Time（AOT），在构建时编译您的应用程序。

当您运行build-only或build-and-serve-local CLI命令时，JIT编译是默认编译：

ng build 服务

对于AOT编译，将--aot标志附加到仅构建或构建和服务本地CLI命令：

content_copy ng build --aot ng serve --aot

来源：https://angular.io/guide/aot-compiler

在AOT编译之后，你的整个ts（ES6）代码将被转换为普通的javascript，那时你的枚举也会被转换。这里你的值为null。它试图通过调用

来转换该枚举值

的ToString（）。 这是你的情况 null.toString（）

所以抛出错误。