JIT编译器不可用错误,更新后出现空白屏幕(从Angular 15.1.0升级到16.2.14)

ugmeyewa  于 6个月前  发布在  Angular
关注(0)|答案(8)|浏览(80)

Description

I encountered an issue when upgrading Angular from version 15 to 16. Despite checking various forums, I couldn't find a solution. I hope someone here has faced a similar issue and could provide some advice. The problem is related to the JIT Compiler being unavailable. I suspect this is due to a library or package still relying on the View Engine, while Angular 16 requires Ivy. The error message only states "JIT Compiler unavailable", leaving me with a blank screen and no further information to debug or fix the issue. I've found a couple of potential workarounds, but they don't seem to follow best practices: 1. Setting aot to false in angular.json. 1. Importing @angular/compiler in the main.ts file. Both approaches appear to enable the use of both Ivy and the View Compiler, but I'm looking for a solution that avoids these methods. Any suggestions on how to identify the root cause or provide more meaningful console errors would be greatly appreciated.

{
  "devDependencies": {
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "^2.0.1",
    "karma-spec-reporter": "^0.0.32",
    "lint-staged": "^11.1.2",
    "ngzip": "~1.1.3",
    "prettier": "2.2.1",
    "pretty-quick": "3.1.0",
    "run-script-os": "^1.1.6",
    "ts-node": "~8.3.0",
    "tsconfig-paths": "3.8.0",
    "typescript": "^4.9.5",
    "webpack-bundle-analyzer": "^4.10.1"
  },
  "description": "An Ionic project"
}
kb5ga3dv

kb5ga3dv1#

你好,这可能是#43415的重复问题。
这不是VE/Ivy相关的问题。
这个错误意味着编译器模块出于某种原因没有被加载。这可能与自定义webpack配置的使用有关,但在没有可复现问题的的情况下,无法进行调查。
另外,需要注意的是,只有在你有依赖于JIT编译器的组件时,才需要编译器模块。这可以通过具有jit: true或者动态创建组件来实现。这两种行为都不推荐,因为它需要将重量级的编译器模块包含到主包中。

sqyvllje

sqyvllje2#

感谢@JeanMeche的及时回复。我已经查看了其他工单,我的仓库中没有webpack.config.js文件。

请问您能提供更多关于如何进一步调试的信息吗?例如,我应该寻找特定的配置还是文件?另外,在main.ts文件中导入@angular/compiler是否是一个可行的解决方案,还是有其他推荐的方法来确保编译器模块被正确加载?

如果有任何其他提示或最佳实践来确定此问题的根本原因,我将非常感激。

kxe2p93d

kxe2p93d3#

你的依赖中有@angular-builders/custom-webpack,你应该查看它在哪里/为什么被使用,因为这不是团队支持的构建器。
是的,导入编译器包可以解决你的问题。但最好先理解为什么它在一开始就需要(无论是在你的代码中还是通过你的一个依赖项)。

hs1rzwqc

hs1rzwqc4#

另外,有没有一种方法可以识别出我的项目中哪些组件依赖于JIT编译器?

pzfprimi

pzfprimi5#

我也有同样的问题。

ijnw1ujt

ijnw1ujt6#

相同的 package.json 文件内容如下:

{
 "name": "your-project-name",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "tsc && tsc-watch",
  "build": "tsc",
  "start": "concurrently \"npm run build\" \"npm run test\"",
  "eject": "react-scripts eject"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
  // ...
 },
 "devDependencies": {
  // ...
 }
}
lsmd5eda

lsmd5eda7#

@JeanMeche,我们引入@angular-builders/custom-webpack的唯一原因是防止OneTrust修改脚本,从而破坏应用程序。以下是整个仓库中唯一使用它的地方。以及在angular.json文件中的一些更改,如下所示:

import { TargetOptions } from '@angular-builders/custom-webpack';
export default (targetOptions: TargetOptions, indexHtml: string) => {
  

// Add the 'data-ot-ignore' attribute to the Angular scripts injected by webpack.
// This prevents OneTrust from modifying the scripts, which breaks the app.


  indexHtml = indexHtml.replace('src="runtime', 'data-ot-ignore src="runtime');
  indexHtml = indexHtml.replace('src="polyfills', 'data-ot-ignore src="polyfills');
  indexHtml = indexHtml.replace('src="styles', 'data-ot-ignore src="styles');
  indexHtml = indexHtml.replace('src="vendor', 'data-ot-ignore src="vendor');
  indexHtml = indexHtml.replace('src="main', 'data-ot-ignore src="main');
  return indexHtml;
};

![](//img.saoniuhuo.com/images/202407/97461721407119362.jpg)
rseugnpd

rseugnpd8#

@JeanMeche 仅供参考:我也尝试从 package.json 中移除上述依赖项("@angular-builders/custom-webpack": "^16.0.1",),但仍然看到相同的错误。

相关问题