JIT 编译器在角度更新后不可用

Question

我已将 Angular 应用程序从 Angular 更新10为 Angular 12。更新开发模式后工作正常。但在生产构建中我收到"JIT compiler unavailable"错误。我已经进口了'@angular/compiler'；文件中main.ts也有。我找不到这个问题的任何可能的原因。

Answer 1

Angular 13+ 更新

除了以下步骤之外，现在还必须使用 Angular 链接器来处理 Angular 编译器创建的所有 .mjs 文件，否则您将再次看到 JIT 错误。请参阅示例配置。

背景

JIT compiler unavailable使用过时的插件（即仍然使用 View Engine 而不是 Ivy 的插件）时可能会发生此错误。

根据 Google 的Building Libraries with Ivy指南，库可以以 3 种格式分发：View Engine（现已弃用）、Partial-Ivy（推荐）和 Full-Ivy。

Ivy 应用程序仍然可以通过 NGCC 使用 View Engine 格式，但 View Engine 预计将在 Angular 13 中删除，因此库作者应该继续使用“部分 Ivy”格式。以下是有关这一变化的深入探讨。

如何修复（3步）

1.确定有问题的插件。

重要提示：如果您的 TerserPlugin 配置使用ngDevMode: false，Angular 将抛出一般JIT compiler unavailable错误。删除该标志（或使用ngDevMode: true）应该会显示一个更有用的错误，其中按名称提及了该插件。如果这没有帮助，请尝试答案末尾的调试技巧。ngDevMode问题解决后，请务必设置回 false；它会对捆绑包大小产生很大影响。

2 . 要求库作者更新插件的 tsconfig.prod.json 文件：

"angularCompilerOptions": {
   "enableIvy": false // Remove this line or use true
   "compilationMode": "partial" // Add this line
}

3.通过使用Angular Linker编译库来使用该格式，该链接器目前仅作为 Babel 插件提供：@angular/compiler-cli/linker/babel

简而言之，将其添加到您的 Webpack 配置中并替换ng-click-outside为您的插件：

rules: [
{
  // Explicit rule to run the linker over partial libraries
  test: /.*\.js$/,
  include: /node_modules\/ng-click-outside/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        configFile: false,
        plugins: ['@angular/compiler-cli/linker/babel'], // Required!
      }
    }
  ]
},
{
  // Regular rule for all non-library files
  test: /\.[jt]sx?$/,
  exclude: /node_modules/,
  use: [
    {loader: 'babel-loader'}, // Optional
    {
      loader: '@ngtools/webpack', // Required
      options: {
        directTemplateLoading: false, // See https://www.npmjs.com/package/@ngtools/webpack
      }
    },
    {loader: '@angular-devkit/build-optimizer/webpack-loader'}, // Optional
  ]
},

webpack 配置的功劳来自此Github 问题中的 Robert van Hoesel 。

调试技巧

1.在调试问题时，您可以添加import '@angular/compiler';main.ts 文件（正如 OP 所做的那样），但这将在您的产品版本中输出 JIT 编译器，并且不是真正的修复。不要在生产中使用 JIT 编译器。

注意：一旦工作正常，如果您仍然在生产 webpack 包中看到 Angular 编译器，则可以使用 Webpack 的“externals”选项安全地将其删除。某些 Angular 版本需要编译器进行 JIT 构建，但 AOT 构建不需要编译器。

2.如果您仍然没有看到有用的错误消息，请完全删除 Terser 并确保您没有抑制构建错误。

3.一般而言，在修复 Webpack 问题时，有时创建一个新的 Angular CLI 项目、添加插件（或其他代码）并查看它是否可以构建会很有用。如果确实如此，那么您就知道问题出在您的 Webpack 配置上，而不是 Angular 上。我还发现将 Angular CLI 的配置文件与我自己的配置文件进行比较很有用（尽管这很乏味）。

Answer 2

确保您已'@angular/compiler'在文件的最顶部导入main.ts。之后在你的package.json.

scripts{
 "postinstall": "ngcc --properties es5 browser module main --first-only"
}