3

The Error I got suddenly while running my app in a development environment using 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)

Also got an error saying

Angular extension might not work correctly because ngcc operation failed. Try to invoke ngcc manually by running 'npm/yarn run ngcc'. Please see the extension output for more information.

Package.json contains below



    {
      "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"
      }
    }

and itsconfig.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
      }
    }

Searched many forums to get this resolved. But nothing is helpful for me.

please help

1
  • Some people have recommended this (i.e. disabling Ivy and reinstalling node_modules), but it worked for me without disabling Ivy. I had to revert my package.json because it somehow got changed, then deleted node_modules, and then ran npm i to restore modules. Commented Mar 3, 2021 at 13:44

1 Answer 1

2

For me is caused by the Angular Language Service extension.

  1. Enabled legacy view-engine in the extension setting Angular Language Service setting
  2. Delete node_modules folder (npx rimraf node_modules)
  3. Run npm install

Edit: should have fixed in this commit.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.