角度AOT意外行為

Question

這源於我在一個項目中遇到的類似錯誤，但由於已修復，所以我只想知道為什么會發生。

在Typescript中，當使用常量字符串枚舉時，它將被編譯為字符串或具有該字符串屬性的對象。

在這里查看示例

還有另一個在這里 。 （要查看已編譯的JS，請單擊JS（Typescript）旁邊的箭頭，然后選擇“查看已編譯的JS”）

使用const枚舉值時，至少如果您AOT優化了角度構建，枚舉將被完全丟棄並由字符串替換。

看看這個例子

正如您將看到的，它在stackblitz中工作良好，因為它無需優化即可進行編譯。

如果下載並使用ng build --prod進行ng build --prod ，因為它還會激活--build-optimizer和--aot ，則部署的構建將在運行時崩潰。

這是一個簡單的示例，可從angular.io的動畫文檔中找到 。

我修改的內容在/src/app/hero-list-basic.component.ts中， 第 15、44、48、60 行 。

如果查看已編譯的JS捆綁包，您會發現該枚舉未在任何地方定義。 這與現有引用無關（如您在第60行的構造函數中看到的那樣）。 顯然，內聯生成只是用相應的字符串替換枚舉，就像TS Playground中的TS編譯器一樣。

我的問題是在裝飾器（ @Component ）中，您將看到它沒有被內聯，而是為null。 我的bundle.js中的位置是〜6557行。

（ name: "active"行@ 6569行具有值，因為在該構建中，我沒有將其從字符串更改為枚舉，請忽略它）

---

這是TS編譯器，AOT編譯器，某些webpack插件（用於縮小/丑化）的錯誤，還是我只是愚蠢地研究了這么多？ 預先感謝您的輸入！

Answer 1

在瀏覽器下載並運行該代碼之前，Angular Ahead-of-Time（AOT）編譯器會在構建階段將Angular HTML和TypeScript代碼轉換為高效的JavaScript代碼。

Angular應用程序主要由組件及其HTML模板組成。 在瀏覽器可以呈現應用程序之前，必須通過Angular編譯器將組件和模板轉換為可執行的JavaScript。

Angular提供了兩種編譯應用程序的方法：

即時（JIT），它在運行時在瀏覽器中編譯您的應用程序。提前（AOT），它在構建時對您的應用程序進行編譯。

當您運行僅生成或本地生成和使用CLI命令時，JIT編譯是默認設置：

建立服務

對於AOT編譯，請將--aot標志附加到僅生成或本地生成和使用CLI命令：

content_copy ng建立--aot ng服務--aot

資料來源： https : //angular.io/guide/aot-compiler

在AOT編譯之后，您的整個ts（ES6）代碼將被轉換為純JavaScript，而您的枚舉也將被轉換。 在這里，您的值為空。 它正在嘗試通過調用來轉換該枚舉值

.toString（）。 在您的情況下為null.toString（）

所以拋出錯誤。