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

Stevethemacguy

2021-09-22 10 原文

背景

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 中被删除，因此库作者应该继续使用“partial-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. 在调试问题时，您 can 在 main.ts 文件中添加 import '@angular/compiler'; （正如 OP 所做的那样），但这将在您的产品构建中输出 JIT 编译器，而不是一个真正的修复。不要在生产中使用 JIT 编译器。

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

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

Salahuddin Ahmed

2021-08-27 0 原文

确保您已经在 '@angular/compiler' 文件的最顶部导入了 main.ts 。之后在您的 package.json 中运行它。

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

Adán Escobar

2021-10-09 0 原文

我有同样的问题，它对我有用，重新安装 12 版本的所有角度依赖项：

NGV=12.2.9
npm i 
@angular-devkit/build-angular@$NGV 
@angular-devkit/core@$NGV 
@angular/animations@$NGV 
@angular/common@$NGV 
@angular/compiler@$NGV 
@angular/core@$NGV 
@angular/forms@$NGV 
@angular/platform-browser@$NGV 
@angular/platform-browser-dynamic@$NGV 
@angular/router@$NGV 
@angular/cli@$NGV 
@angular/compiler-cli@$NGV 
typescript@4.2.3 
zone.js@~0.11.4 --force

上面更新了所有用于编译的依赖项，如 webpack 和 typescript

aniran mohammadpour

2022-01-21 0 原文

我已经更新了打字稿，并使用了Angular 13，实际上全部发生了，当我想使用Mat-Paginator和材料表。

解决方案我发现的是将下面的代码添加到 tsconfig.json file angularCompilerOptions ：

  "enableIvy": false

我的 package.json 配置

{
"name": "client",
"version": "0.0.0",
"scripts": {
    "ng": "ng",
    "start": "ng build --watch",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},
"private": true,
"dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/cdk": "^13.1.3",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/material": "^13.1.3",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@ng-bootstrap/ng-bootstrap": "^11.0.0-beta.2",
    "@ngx-loading-bar/core": "^5.1.1",
    "@ngx-loading-bar/http-client": "^5.1.1",
    "@ngx-loading-bar/router": "^5.1.1",
    "bootstrap": "^5.0.0",
    "bootstrap-icons": "^1.7.2",
    "moment": "^2.29.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
},
"devDependencies": {
    "@angular-devkit/build-angular": "~13.0.2",
    "@angular/cli": "~13.0.2",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.4.3"
}

}

我的 app.module.ts 配置：

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common

/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { LoadingBarModule } from '@ngx-loading-bar/core';
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { Api } from './services/api.service';
import { BrowserInterceptor } from './services/browser.interceptor';
import { PublicVars } from './services/publicVars.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    LoadingBarModule,
    LoadingBarRouterModule,
    LoadingBarHttpClientModule,
    FontAwesomeModule,
    BrowserAnimationsModule,

  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: BrowserInterceptor,
      multi: true,
    },
    Api,
    PublicVars,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}