Errors after npm audit fix angular 10.0.1

Question

I ran this older 10.0.1 angular project today, and it told me it had a lot of low vulnerabilities and a few high ones. so i ran npm audit fix to fix them. but now when I try to run it, it gives me these errors:

Error: ./src/main.ts  
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getResourceDependencies(...) is not a function or its return value is not iterable
    at getDependencies (C:\Web\vgc\vgc\node_modules\@ngtools\webpack\src\ivy\plugin.js:261:56)
    at C:\Web\vgc\vgc\node_modules\@ngtools\webpack\src\ivy\plugin.js:374:20
    at analyzingFileEmitter (C:\Web\vgc\vgc\node_modules\@ngtools\webpack\src\ivy\plugin.js:307:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)



Error: ./src/polyfills.ts  
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getResourceDependencies(...) is not a function or its return value is not iterable
    at getDependencies (C:\Web\vgc\vgc\node_modules\@ngtools\webpack\src\ivy\plugin.js:261:56)
    at C:\Web\vgc\vgc\node_modules\@ngtools\webpack\src\ivy\plugin.js:374:20
    at analyzingFileEmitter (C:\Web\vgc\vgc\node_modules\@ngtools\webpack\src\ivy\plugin.js:307:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Any ideas how to fix this? I couldn't really find any relatable problems or solutions online.

Chalkstone

nom audit fix updates dependencies. Sometimes updated libraries are not compatible with other libraries or with your angular setup. Make sure you are using correct webpack version. – Mortality

Thanks for the answer, it indeed had to do something with compatibility problems. I updated the webpack library which fixed it but gave me some more pretty unexplickable errors. I tried fixing it for a bit but in the end I did the smart thing and saved myself the hassle by just copying everything over to a new clean project which works fine now. – Chalkstone

It always solves the problem, doesn't it? 😀 @rtman – Mortality

I'm facing the same problem. It started happening after installing tailwind on a fresh NX installation, I tried installing both 4 and 5 of webpack versions. no luck so far, any advice here? thanks. – Newlin

I also noticed that webpack version didn't change after the installation of the package mentioned above, so it might be something else. webpack version: 4.43.0 – Newlin

Answer 1

Upgrading the Angular CLI from 10 to 11 works for me.

ng update @angular/core @angular/cli
ng update

Premise

Updating to Angular 11 also solved the issue for me. Note that the command above will always update to the newest version – Dibri

Perfect after doing a lot of things this works for me. – Heartwood

This did work for me, on reflection however, I should have tried tried Darshan's answer first of removing installed packages and doing a fresh package install. Fortunately, I do not have any other angular projects to be concerned about. – Eanes

It's not really an option when you have to keep the Angular version constant to maximise inter-project compatibility of components – Cannon

Answer 2

TRY this one

rm -rf node_modules/
npm install
npm run build

Clothespin

You may also do npm start or any of your build script (instead of npm run build), which builds or serves your app. – Colner

Answer 3

I have also fixed the same issue. The main reason was the "@angular-devkit/build-angular" version which is not matching in my case. I changed it's version compatible angular version. In my case I am using angular 10 and previously the version started with "0.11" and I changed it to "0.1002.3".

Misdoubt

Answer 4

Try this:

rmdir /s node_modules
npm install "or" npm install @angular-devkit/build-angular
npm run build

Sandi

"Try this" does not make for a good answer. You should explain how and why this solves their problem. I recommend reading, "How do I write a good answer?" – Crannog

Answer 5

I faced the same problem. What I did to successfully fix the problem:

1. git restore package-lock.json
2. git restore package.json
3. rm -rf node_modules/
4. npm install
5. npm start

The reasons of the steps: 1.2. steps to restore the origin package file 3 step to delete all the installed dependencies 4 step to install the dependencies again after all, it restores to the origin status, it works.

Shutdown

Answer 6

My clients make us be on a certain version, that they have approved. This is v10 for me.

I ran the below to solve this issue, after I inspected the appropriate package.json

npm i @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] --save

Recuperate

Answer 7

You can resolve this problem by Upgrading the Angular CLI version from 10 to 11. as #Craig answer.

or else, remove node_modules, package-lock.json file.

restore old package.json file and then run npm install. or don't do npm audit fix.

npm audit fix upgrades/modifies package dependencies, that's so made error.

Grueling

Answer 8

you should try this

ng update @angular/cli @angular/core --allow-dirty --force

I tried this before but that does not allow to update in windows os

ng update @angular/cli @angular/core

or

ng update @angular/cli @angular/core --allow-dirty

that's problem create beacuse of .\Temp\ng-fmB0C2\angular-errors.log

Dulse

Answer 9

In addition to all of the above, have to do an extra step:

• check if there is a duplicate versions of webpack, don't know how it was introduced though. The tree looked:

+-- @angular-devkit/[email protected] -- [email protected] -- [email protected]

If so, fixed by( https://docs.npmjs.com/cli/v7/commands/npm-dedupe ):

npm dedupe

Reconstructive

Answer 10

My problem was caused by

"preserveSymlinks": true,

missing from the angular.json in the options for my build.

Sandpaper

Answer 11

In my case problem gone resolved after installing the below package.

npm install @ngtools/webpack

Shifflett

Answer 12

For my case, I ran ng update @angular/cli@^11 @angular/core@^11

Then install webpack@4 since other package has dependencies on it.

Then install tapable & @types/webpack since webpack 4 plugin needs it.

.. and few times remove node_modules & npm install :)

Toxic

Hello. Can we see your error logs? That would help shine light on the problem you are facing. – Lotty

Hello. Thank you for your concern. My problem is solved by now. Tq again – Toxic