ERROR Error: Angular JIT compilation failed: '@angular/compiler' not loaded

Question

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

Answer 1

For me is caused by the Angular Language Service extension.

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

Edit: should have fixed in this commit.