An error occurred during the build error ngcc failed

I was working on Angular 8 project when the time came to upgrade it to Angular 12. Since I come exclusively from React environments, didn’t think it would be this much of a hassle until I started. It has been 2 days that I have been following Angular Upgrade guide, but keep getting the following error:

⠋ Generating browser application bundles (phase: setup)...TypeError: Cannot read properties of undefined (reading 'text')
    at NodeObject.getText (C:<project_name>node_modulestypescriptlibtypescript.js:152697:31)
    at getRequiredModulePath (C:<project_name>node_modules@angularcompiler-clingccsrchostumd_host.js:519:99)
    at Object.getImportsOfUmdModule (C:<project_name>node_modules@angularcompiler-clingccsrchostumd_host.js:510:23)
    at UmdDependencyHost.extractImports (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesumd_dependency_host.js:43:54)
    at UmdDependencyHost.DependencyHostBase.recursivelyCollectDependencies (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesdependency_host.js:85:32)  
    at UmdDependencyHost.DependencyHostBase.collectDependencies (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesdependency_host.js:38:22)
    at DependencyResolver.getEntryPointWithDependencies (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesdependency_resolver.js:75:22)
    at EntryPointCollector.walkDirectoryForPackages (C:<project_name>node_modules@angularcompiler-clingccsrcentry_point_finderentry_point_collector.js:47:52)
    at EntryPointCollector.walkDirectoryForPackages (C:<project_name>node_modules@angularcompiler-clingccsrcentry_point_finderentry_point_collector.js:75:103)
    at C:<project_name>node_modules@angularcompiler-clingccsrcentry_point_finderprogram_based_entry_point_finder.js:124:100
C:<project_name>node_modules@ngtoolswebpacksrcngcc_processor.js:139
            throw new Error(errorMessage + `NGCC failed${errorMessage ? ', see above' : ''}.`);
            ^

Error: NGCC failed.
    at NgccProcessor.process (C:<project_name>node_modules@ngtoolswebpacksrcngcc_processor.js:139:19)
    at <project_name>node_modules@ngtoolswebpacksrcivyplugin.js:129:27
    at Hook.eval [as call] (eval at create (C:<project_name>node_modulestapablelibHookCodeFactory.js:19:10), <anonymous>:20:1)
    at Hook.CALL_DELEGATE [as _call] (C:<project_name>node_modulestapablelibHook.js:14:14)
    at Compiler.newCompilation (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:1043:30)
    at C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:1088:29
    at Hook.eval [as callAsync] (eval at create (C:<project_name>node_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:<project_name>node_modulestapablelibHook.js:18:14)
    at Compiler.compile (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:1083:28)
    at C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:200:19
    at Hook.eval [as callAsync] (eval at create (C:<project_name>node_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:<project_name>node_modulestapablelibHook.js:18:14)
    at run (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:154:33)
    at C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:149:6
    at Compiler.readRecords (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:920:11)
    at run (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:145:26)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <project_name>@0.0.0 start: `ng serve --proxy-config proxy.conf.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <project_name>@0.0.0 start script.

package.json:

{
  "name": "aly",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "12.2.12",
    "@angular-devkit/schematics": "12.2.12",
    "@angular/animations": "^12.2.12",
    "@angular/cdk": "^12.2.12",
    "@angular/common": "^12.2.12",
    "@angular/compiler": "^12.2.12",
    "@angular/core": "^12.2.12",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "^12.2.12",
    "@angular/http": "^7.2.16",
    "@angular/material": "^12.2.12",
    "@angular/platform-browser": "^12.2.12",
    "@angular/platform-browser-dynamic": "^12.2.12",
    "@angular/router": "^12.2.12",
    "@auth0/angular-jwt": "^3.0.1",
    "@covalent/core": "2.1.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@schematics/angular": "^8.3.29",
    "@types/file-saver": "^2.0.3",
    "@types/lodash": "^4.14.176",
    "@types/xml2js": "^0.4.9",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "color-string": "^1.6.0",
    "core-js": "^3.19.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "lodash.debounce": "^4.0.8",
    "ng2-dnd": "^5.0.2",
    "ngx-color-picker": "^8.2.0",
    "ngx-text-equality-validator": "^1.0.1",
    "ngx-toastr": "^11.3.3",
    "npm": "^6.14.15",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "tslib": "^2.0.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.12",
    "@angular/cli": "^12.2.12",
    "@angular/compiler-cli": "^12.2.12",
    "@angular/language-service": "^12.2.12",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "~6.1.0",
    "typescript": "4.3.5",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.46.0"
  }
}

tsconfig.json:

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

I have checked for out-of-date packages with npm outdated and updated all of them. Most of the answers posted here unfortunately did not work for me, such as setting enableIvy to true/false and removing node_modules/reinstalling them. Any additional help or advice is appreciated.

🐞 Bug report

Command (mark with an x)

• new
• [x ] build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 9.0.1

Description

I followed the instruction on update.angular.io. The update was sucessfull.

🔬 Minimal Reproduction

I tried to run «ng b —watch» like in Angular 9.0.1 with the Option «angularCompilerOption»: { «enableIvy»: true }. The error bellow occure. If i disable Ivy everything works.

🔥 Exception or Error

Compiling angular-playground : main as esm5
Error: Error on worker angular/angular-cli#1: Error: Compiled class declaration is not inside an IIFE: AppComponent in workspace/node_modules/angular-playground/dist/build/src/app.component.js
    at Esm5RenderingFormatter.addDefinitions (workspacenode_modules@angularcompiler-clingccsrcrenderingesm5_rendering_formatter.js:43:23)
    at workspacenode_modules@angularcompiler-clingccsrcrenderingrenderer.js:79:40
    at Array.forEach ()
    at Renderer.renderFile (workspacenode_modules@angularcompiler-clingccsrcrenderingrenderer.js:76:46)
    at workspacenode_modules@angularcompiler-clingccsrcrenderingrenderer.js:53:84
    at Array.forEach ()
    at Renderer.renderProgram (workspacenode_modules@angularcompiler-clingccsrcrenderingrenderer.js:48:54)
    at Transformer.transform (workspacenode_modules@angularcompiler-clingccsrcpackagestransformer.js:84:42)
    at workspacenode_modules@angularcompiler-clingccsrcexecutioncreate_compile_function.js:49:42
    at workspacenode_modules@angularcompiler-clingccsrcexecutionclusterworker.js:85:54
    at ClusterMaster.onWorkerMessage (workspacenode_modules@angularcompiler-clingccsrcexecutionclustermaster.js:195:27)
    at workspacenode_modules@angularcompiler-clingccsrcexecutionclustermaster.js:55:95
    at ClusterMaster. (workspacenode_modules@angularcompiler-clingccsrcexecutionclustermaster.js:293:57)
    at step (workspacenode_modules@angularcompiler-clinode_modulestslibtslib.js:140:27)
    at Object.next (workspacenode_modules@angularcompiler-clinode_modulestslibtslib.js:121:57)
    at workspacenode_modules@angularcompiler-clinode_modulestslibtslib.js:114:75
    at new Promise ()
    at Object.__awaiter (workspacenode_modules@angularcompiler-clinode_modulestslibtslib.js:110:16)
    at EventEmitter. (workspacenode_modules@angularcompiler-clingccsrcexecutionclustermaster.js:287:32)
    at EventEmitter.emit (events.js:311:20)
An unhandled exception occurred: NGCC failed.


[error] Error: NGCC failed.
    at NgccProcessor.process (workspacenode_modules@ngtoolswebpacksrcngcc_processor.js:69:19)
    at workspacenode_modules@ngtoolswebpacksrcangular_compiler_plugin.js:576:31
    at SyncHook.eval [as call] (eval at create (workspacenode_modulestapablelibHookCodeFactory.js:19:10), :7:1)
    at SyncHook.lazyCompileHook (workspacenode_modulestapablelibHook.js:154:20)
    at Object.webpack [as webpackFactory] (workspacenode_moduleswebpacklibwebpack.js:55:30)
    at createWebpack (workspacenode_modules@angular-devkitbuild-webpacksrcwebpackindex.js:20:36)
    at Object.runWebpack (workspacenode_modules@angular-devkitbuild-webpacksrcwebpackindex.js:34:12)
    at SwitchMapSubscriber.project (workspacenode_modules@angular-devkitbuild-angularsrcbrowserindex.js:131:32)
    at SwitchMapSubscriber._next (workspacenode_modules@angular-devkitbuild-angularnode_modulesrxjsinternaloperatorsswitchMap.js:49:27)
    at SwitchMapSubscriber.Subscriber.next (workspacenode_modules@angular-devkitbuild-angularnode_modulesrxjsinternalSubscriber.js:66:18)
    at workspacenode_modules@angular-devkitbuild-angularnode_modulesrxjsinternalutilsubscribeToPromise.js:7:24

🌍 Your Environment

     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △  | '_  / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   __| |_|__, |__,_|_|__,_|_|       ____|_____|___|
                |___/
    

Angular CLI: 10.0.0
Node: 12.16.1
OS: win32 x64

Angular: 10.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.4
typescript                        3.9.5
webpack                           4.43.0

Anything else relevant?

Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "STM": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "outputPath": "Map",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets",
              "src/assets/logo.png",
              "src/style/"
            ],
            "extractCss": true,
            "styles": [
              "node_modules/@fortawesome/fontawesome-pro/css/all.css",
              "node_modules/flag-icon-css/css/flag-icon.min.css",
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/style/"
              ]
            },
            "scripts": [],
            "allowedCommonJsDependencies": [
              "@angular/common/locales/de",
              "@angular/common/locales/en",
              "rxjs/Subject",
              "rxjs/operators",
              "rxjs/Subscription",
              "lodash/cloneDeep",
              "chart.js",
              "mathjs",
              "rbush"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/index.html",
                  "with": "src/redirect.html"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "STM:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "STM:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "STM:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/flag-icon-css/css/flag-icon.min.css",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/assets/"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "STM-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "STM:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "STM:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "playground": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "outputPath": "dist/playground",
            "index": "src/index.html",
            "main": "src/main.playground.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets",
              "src/styles.css"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "playground:build",
            "port": 4201
          }
        }
      }
    }
  },
  "defaultProject": "STM",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }
}

Tsconfig.app.json

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "experimentalDecorators": true,
    "allowJs": true,
    "outDir": "../out-tsc/app",
    "types": []
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Issue

I was working on Angular 8 project when the time came to upgrade it to Angular 12. Since I come exclusively from React environments, didn’t think it would be this much of a hassle until I started. It has been 2 days that I have been following Angular Upgrade guide, but keep getting the following error:

⠋ Generating browser application bundles (phase: setup)...TypeError: Cannot read properties of undefined (reading 'text')
    at NodeObject.getText (C:<project_name>node_modulestypescriptlibtypescript.js:152697:31)
    at getRequiredModulePath (C:<project_name>node_modules@angularcompiler-clingccsrchostumd_host.js:519:99)
    at Object.getImportsOfUmdModule (C:<project_name>node_modules@angularcompiler-clingccsrchostumd_host.js:510:23)
    at UmdDependencyHost.extractImports (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesumd_dependency_host.js:43:54)
    at UmdDependencyHost.DependencyHostBase.recursivelyCollectDependencies (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesdependency_host.js:85:32)  
    at UmdDependencyHost.DependencyHostBase.collectDependencies (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesdependency_host.js:38:22)
    at DependencyResolver.getEntryPointWithDependencies (C:<project_name>node_modules@angularcompiler-clingccsrcdependenciesdependency_resolver.js:75:22)
    at EntryPointCollector.walkDirectoryForPackages (C:<project_name>node_modules@angularcompiler-clingccsrcentry_point_finderentry_point_collector.js:47:52)
    at EntryPointCollector.walkDirectoryForPackages (C:<project_name>node_modules@angularcompiler-clingccsrcentry_point_finderentry_point_collector.js:75:103)
    at C:<project_name>node_modules@angularcompiler-clingccsrcentry_point_finderprogram_based_entry_point_finder.js:124:100
C:<project_name>node_modules@ngtoolswebpacksrcngcc_processor.js:139
            throw new Error(errorMessage + `NGCC failed${errorMessage ? ', see above' : ''}.`);
            ^

Error: NGCC failed.
    at NgccProcessor.process (C:<project_name>node_modules@ngtoolswebpacksrcngcc_processor.js:139:19)
    at <project_name>node_modules@ngtoolswebpacksrcivyplugin.js:129:27
    at Hook.eval [as call] (eval at create (C:<project_name>node_modulestapablelibHookCodeFactory.js:19:10), <anonymous>:20:1)
    at Hook.CALL_DELEGATE [as _call] (C:<project_name>node_modulestapablelibHook.js:14:14)
    at Compiler.newCompilation (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:1043:30)
    at C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:1088:29
    at Hook.eval [as callAsync] (eval at create (C:<project_name>node_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:<project_name>node_modulestapablelibHook.js:18:14)
    at Compiler.compile (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:1083:28)
    at C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:200:19
    at Hook.eval [as callAsync] (eval at create (C:<project_name>node_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:<project_name>node_modulestapablelibHook.js:18:14)
    at run (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:154:33)
    at C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:149:6
    at Compiler.readRecords (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompiler.js:920:11)
    at run (C:<project_name>node_modules@angular-devkitbuild-angularnode_moduleswebpacklibWatching.js:145:26)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <project_name>@0.0.0 start: `ng serve --proxy-config proxy.conf.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <project_name>@0.0.0 start script.

package.json:

{
  "name": "aly",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "12.2.12",
    "@angular-devkit/schematics": "12.2.12",
    "@angular/animations": "^12.2.12",
    "@angular/cdk": "^12.2.12",
    "@angular/common": "^12.2.12",
    "@angular/compiler": "^12.2.12",
    "@angular/core": "^12.2.12",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "^12.2.12",
    "@angular/http": "^7.2.16",
    "@angular/material": "^12.2.12",
    "@angular/platform-browser": "^12.2.12",
    "@angular/platform-browser-dynamic": "^12.2.12",
    "@angular/router": "^12.2.12",
    "@auth0/angular-jwt": "^3.0.1",
    "@covalent/core": "2.1.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@schematics/angular": "^8.3.29",
    "@types/file-saver": "^2.0.3",
    "@types/lodash": "^4.14.176",
    "@types/xml2js": "^0.4.9",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "color-string": "^1.6.0",
    "core-js": "^3.19.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "lodash.debounce": "^4.0.8",
    "ng2-dnd": "^5.0.2",
    "ngx-color-picker": "^8.2.0",
    "ngx-text-equality-validator": "^1.0.1",
    "ngx-toastr": "^11.3.3",
    "npm": "^6.14.15",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "tslib": "^2.0.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.12",
    "@angular/cli": "^12.2.12",
    "@angular/compiler-cli": "^12.2.12",
    "@angular/language-service": "^12.2.12",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "~6.1.0",
    "typescript": "4.3.5",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.46.0"
  }
}

tsconfig.json:

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

I have checked for out-of-date packages with npm outdated and updated all of them. Most of the answers posted here unfortunately did not work for me, such as setting enableIvy to true/false and removing node_modules/reinstalling them. Any additional help or advice is appreciated.

Solution

As misha130 suggested in the comments, there was (a single) library not aligned with the latest Ivy changes which was causing the error. I was fortunate enough to not have a lot of dependencies in the project, so I went through each one and uninstalled it until the app started without errors.

Answered By – borgmater

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

"angularCompilerOptions": {
    "enableIvy": false
},

Unknown arguments: use-program-dependencies, useProgramDependencies
An unhandled exception occurred: NGCC failed.
See "C:...angular-errors.log" for further details.

ng update @angular/cli @angular/core
npm update @angular/material @angular/cdk
npm install -g [email protected]

Tags:

Javascript

Typescript

Angular

I tried to compile my project and I’m getting an error:

Error: Error on worker #3: Error: No typings declaration can be found for the referenced NgModule class in static withConfig(configOptions, 
        // tslint:disable-next-line:max-line-length
        breakpoints = []) {
            return {
                ngModule: FlexLayoutModule,
                providers: configOptions.serverLoaded ?
                    [
                        { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                        { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                        { provide: SERVER_TOKEN, useValue: true },
                    ] : [
                    { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                    { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                ]
            };
        }.

I used
ng add @angular/materialand npm install @angular/flex-layout@latest --save and I got this error.

Till now I tried:

• reinstall flexLayot many times.
• remove node_modules and install it once again.

My dependencies looks like:

"dependencies": {
    "@angular/animations": "^9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.11",
    "@angular/compiler": "~9.1.11",
    "@angular/core": "~9.1.11",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.11",
    "@angular/platform-browser-dynamic": "~9.1.11",
    "@angular/router": "~9.1.11",
    "rxjs": "~6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

Does someone know that could be wrong?

My app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    SharedModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

but I added Flex to shared module so I will paste also shared.module.ts

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FlexLayoutModule
  ],
  exports: [
    FlexLayoutModule
  ]
})
export class SharedModule { }

Answer

Attribution
Source : Link , Question Author : derirative23 , Answer Author : julianobrasil