ERROR 错误：Angular JIT 编译失败：'@angular/compiler' 未加载

Posted 2023-02-25

【中文标题】ERROR 错误：Angular JIT 编译失败：\'@angular/compiler\' 未加载

【英文标题】：ERROR Error: Angular JIT compilation failed: '@angular/compiler' not loadedERROR 错误：Angular JIT 编译失败：'@angular/compiler' 未加载

【发布时间】：2021-05-25 09:15:07

【问题描述】：

我在使用 VSCode 在开发环境中运行我的应用程序时突然遇到的错误，

    main.js:7740 ERROR Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
      - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
      - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
      - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
        at getCompilerFacade (vendor.js:20189)
        at Function.get (vendor.js:33871)
        at getInjectableDef (vendor.js:19941)
        at resolveNgModuleDep (vendor.js:47812)
        at NgModuleRef_.get (vendor.js:48688)
        at resolveDep (vendor.js:49213)
        at createClass (vendor.js:49071)
        at createDirectiveInstance (vendor.js:48882)
        at createViewNodes (vendor.js:60498)
        at callViewAction (vendor.js:60948)

还有一个错误提示

Angular 扩展可能无法正常工作，因为 ngcc 操作失败。尝试通过运行“npm/yarn run ngcc”手动调用 ngcc。有关更多信息，请参阅扩展输出。

Package.json 包含以下内容

    
      "name": "dxfsuite",
      "version": "0.0.0",
      "scripts": 
        "ng": "ng",
        "start": "ng serve -o --proxy-config proxy.conf.json --port 4200",
        "build": "ng build",
        "build-prod": "ng build --prod --stats-json --source-map=false",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      ,
      "private": true,
      "dependencies": 
        "@angular-devkit/schematics-cli": "^0.901.14",
        "@angular/animations": "~9.0.0",
        "@angular/cdk": "^9.1.0",
        "@angular/common": "~9.0.0",
        "@angular/compiler": "~9.0.0",
        "@angular/core": "~9.0.0",
        "@angular/forms": "~9.0.0",
        "@angular/localize": "^9.1.13",
        "@angular/platform-browser": "~9.0.0",
        "@angular/platform-browser-dynamic": "~9.0.0",
        "@angular/router": "~9.0.0",
        "@elastic/apm-rum-angular": "^0.5.0",
        "@fullcalendar/angular": "^4.4.5-beta",
        "@fullcalendar/core": "^4.4.0",
        "@fullcalendar/daygrid": "^4.4.0",
        "@fullcalendar/timegrid": "^4.4.0",
        "@ionic/angular": "^5.5.4",
        "@ng-bootstrap/ng-bootstrap": "^6.0.0",
        "@ng-select/ng-select": "^3.7.2",
        "@swimlane/ngx-charts": "^13.0.2",
        "@types/jquery": "^3.5.5",
        "angular-feather": "^6.1.0",
        "apexcharts": "^3.25.0",
        "bootstrap": "^4.6.0",
        "bootstrap-daterangepicker": "^3.0.5",
        "bootstrap-tagsinput": "^0.7.1",
        "daterangepicker": "^3.0.5",
        "install-peers": "^1.0.3",
        "jquery": "^3.4.1",
        "jqueryui": "^1.11.1",
        "loadash": "^1.0.0",
        "lodash": "^4.17.15",
        "moment": "^2.26.0",
        "moment-timezone": "^0.5.33",
        "ng-apexcharts": "^1.5.8",
        "ng-zorro-antd": "^9.0.0-beta.0",
        "ng2-daterangepicker": "^2.0.12",
        "ngx-filesize": "^2.0.13",
        "ngx-perfect-scrollbar": "^8.0.0",
        "ngx-sortablejs": "^3.1.4",
        "ngx-spinner": "^10.0.1",
        "peity": "^3.3.0",
        "popper.js": "^1.16.1",
        "ramda": "^0.26.1",
        "rxjs": "^6.5.4",
        "service-worker": "0.0.0",
        "sortablejs": "^1.13.0",
        "tslib": "^1.10.0",
        "videogular2": "^7.0.2",
        "vivus": "^0.4.5",
        "web-push": "^3.4.3",
        "zone.js": "~0.10.2"
      ,
      "devDependencies": 
        "@angular-devkit/build-angular": "~0.900.1",
        "@angular/cli": "~9.0.1",
        "@angular/compiler-cli": "~9.0.0",
        "@angular/language-service": "~9.0.0",
        "@ionic/angular-toolkit": "^3.1.0",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.20.1",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^4.4.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.7.5"
      
    

及其config.json

    
      "compileOnSave": false,
      "compilerOptions": 
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
          "es2018",
          "dom"
        ]
      ,
      "angularCompilerOptions": 
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
      
    

搜索了许多论坛以解决此问题。但对我没有任何帮助。

请帮忙

【问题讨论】：

有些人推荐了this（即禁用Ivy并重新安装node_modules），但它对我有用而没有禁用Ivy。我不得不恢复我的package.json，因为它不知何故被更改了，然后删除了node_modules，然后运行npm i 来恢复模块。

【参考方案1】：

对我来说是由 Angular 语言服务扩展引起的。

在扩展设置中启用旧版视图引擎 删除node_modules文件夹(npx rimraf node_modules) 运行npm install

编辑：应该在this commit 中修复。