TypeError: angularCompiler.getNextProgram is not a function

Question

I'm using angular 11.2 in my machine and I want to run a angular 12 project. After clone from git, I ran below commands.

1. npm install
2. ng serve

But I got below errors and can't run the project. I read this question but it not worked for me.

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\Users\thimira_p\Desktop\itrd\epic-itrda-web\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\Users\thimira_p\Desktop\itrd\epic-itrda-web\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Error: (webpack)-dev-server/client?http://0.0.0.0:0&sockPath=/sockjs-node
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\Users\thimira_p\Desktop\itrd\epic-itrda-web\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

How to fix this issue?

Kraken

Angular 12 is the newest version, but still in "beta version" – Jourdain

Angular CLI: 12.0.0-rc.1 Node: 14.15.5 Package Manager: npm 6.14.11 OS: win32 x64 Angular: 12.0.0-rc.1.... this is the version show at project when I run "ng v" command. How do I change stable version my project – Kraken

Got into the same thing. Did you find what the problem was, or fix it? – Capri

@Capri - I thing reason is cli & node version low than project. Remove node @ cli and install "node 14.16.1 cli 11.2.12". clone new project & ''npm install". I recommend use stable angular version. – Kraken

Thanks, yeah, I ended up going back to angular 11 – Capri

Angular 12 released nowadays! I have the same problem – Myxomatosis

Answer 1

I had the same problem in an Angular app which uses a custom webpack.config - having @angular-builders/custom-webpack as a dependency.

Angular and @angular-builders major versions should match.

Solved by updating @angular-builders/custom-webpack to the latest version:

npm install @angular-builders/custom-webpack@^12.0.0

---

If, after doing the installation, you get an error like: An unhandled exception occurred: Cannot find module 'webpack', try removing package-lock.json and node_modules and doing a clean install.

---

Github issue: https://github.com/just-jeb/angular-builders/issues/981

Sarthe

Answer 2

Upgrade from @angular-devkit/[email protected] to @angular-devkit/build-angular@12

Kiosk

Answer 3

Try to remove

"aot": true

from angular.json

Coactive

Your solution worked for me but it was so weird, I just removed aot from build object and it effected on my ng serve command! – Lithoid

its working, idk how – Winfield

Answer 4

I'm still seen this error on @angular/[email protected]

The simple solution is to upgrade @angular-devkit/[email protected] to @angular-devkit/[email protected].

The main point is to replace @angular-devkit/[email protected] with @angular-devkit/build-angular@whatever_version_of_angular_you_have_installed in package.json. After that delete "node_modules" folder and do "npm install"

Felonry

Answer 5

I upgraded my app to Angular 11 and had same build errors. This issue fixed for me when I downgraded below package in package.json file.

From:

"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.17",
}

To:

"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.2",
}

Glaucoma