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

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

stack overflow JIT compiler unavailable after angular update
原文答案

答案:

作者头像

背景

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 divechange

如何修复(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 的配置文件与我自己的进行比较很有用(尽管很乏味)。

作者头像

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

scripts{
 "postinstall": "ngcc --properties es5 browser module main --first-only"
}
作者头像

我有同样的问题,它对我有用,重新安装 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

作者头像

我已经更新了打字稿,并使用了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 {}
作者头像

我们在将 Angular 应用程序从 v11 升级到 v12 时遇到了类似的问题。解决方案是从 tsconfig.json 中删除

"compilationMode": "partial" 

或将其设置为

"compilationMode": "full"

作为仅库所需的“部分”值,而不是完整的角度应用程序。

作者头像

从 Angular 11 升级到 13 后,我看到以下错误:

enter image description here

在研究了我的代码后,我在我的一个组件中发现了几个 @Component {...} 装饰器及其元素(即 selectortemplatestyles )。看来 Angular 11 对这种重复没有任何问题。