angular - Angular 更新后 JIT 编译器不可用

Question

我已经从 angular 10 更新了一个 angular 应用程序成 Angular 12 .更新开发模式后工作正常。但是在生产版本中，我得到了 "JIT compiler unavailable"错误。我已导入 '@angular/compiler' ;在 main.ts文件也。我找不到此问题的任何可能原因。

Answer 1

背景JIT compiler unavailable使用过时的插件(即仍然使用 View Engine 而不是 Ivy 的插件)时可能会发生错误。
根据谷歌的 Building Libraries with Ivy指南，库可以以 3 种格式分发:View Engine(现已弃用)、Partial-Ivy(推荐)和 Full-Ivy。
Ivy 应用程序仍然可以通过 NGCC 使用 View Engine 格式，但 View Engine 计划在 Angular 13 中删除，因此库作者应该使用“部分 Ivy ”格式向前发展。这是一个 deep dive关于change .
如何修复 (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 issue 的 Robert van Hoesel .
调试技巧
1. 调试问题时，可以添加import '@angular/compiler';在您的 main.ts 文件中(正如 OP 所做的那样)，但这将在您的产品构建中输出 JIT 编译器，并不是真正的修复。不要在生产中使用 JIT 编译器。
2. 如果您仍然没有看到有用的错误消息，请完全删除 Terser 并确保您没有抑制构建错误。
3. 通常在修复 Webpack 问题时，创建一个新的 Angular CLI 项目、添加插件(或其他代码)并查看它是否构建有时会很有用。如果是这样，那么您就知道您的 Webpack 配置是问题所在，而不是 Angular。我还发现将 Angular CLI 的配置文件与我自己的配置文件进行比较很有用(尽管它很乏味)。