title: ERROR Error: Angular JIT compilation failed: '@angular/compiler' not loaded
body: <p>The Error I got suddenly while running my app in a development environment using VSCode,</p>
  <pre><code>
  
      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)
  
  </code></pre>
  <p>Also got an error  saying</p>
  <p>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.</p>
  <p>Package.json contains below</p>
  <pre><code>
  
      {
        "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"
        }
      }
  
  </code></pre>
  <p>and itsconfig.json</p>
  <pre><code>
  
      {
        "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
        }
      }
  
  </pre></code>
  <p>Searched many forums to get this resolved. But nothing is helpful for me.</p>
  <p>please help</p>