Angular, new project, npm audit high severity vulnerabilities

Question

So, I start a fresh new angular project.

• npm i @angular/cli --global
• ng new whisList --no-standalone
  • I use --no-standalone flag to have the NgModel file, because I started to learn from a tutorial where it is still used
• chose CSS
• alow server side rendering

And now with the fresh new project, if a run

I start a fresh new angular project

• npm i @angular/cli --global

• ng new whisList --no-standalone (to have app.module.ts file)

• chose CSS

• allow to server side rendering

  And then, with a fresh new project if I run

• npm audit

  • I have this report:

  • # npm audit report
    
    webpack-dev-middleware  6.0.0 - 6.1.1
    Severity: high
    Path traversal in webpack-dev-middleware - https://github.com/advisories/GHSA-wr3j-pwj9-hqq6
    fix available via `npm audit fix --force`
    Will install @angular-devkit/[email protected], which is a breaking change
    node_modules/webpack-dev-middleware
      @angular-devkit/build-angular  15.1.0-next.0 - 17.3.1
      Depends on vulnerable versions of webpack-dev-middleware
      node_modules/@angular-devkit/build-angular
    
    2 high severity vulnerabilities
    
    To address all issues (including breaking changes), run:
      npm audit fix --force
    

  • But the

    • npm audit fix 
      

      command does not work, and mess up the dependencies even more.

    Any one know why is it happening? How to fix? I'm a baby in angular developping.

Answer 1

First and foremost create a local back-up of your Angular application/project.

1. You can try the commands:

ng update

npm update

2. When the commands: ng update and npm update aren't sufficient, then you can manually update the file package.json

The current version of webpack-dev-middleware seems outdated, so replace in package.json this with e.g.:

"webpack-dev-middleware": "^7.0.0",

See the NPMJS-website for the appropriate versions.

Delete the file package-lock.json which might lead to installation problems.

After installation of the updated packages a new package-lock.json file will be generated.

Run the command to install the packages:

npm install

Question: How does your package.json look like? (I don't have enough reputation to 'Add a comment')

Answer 2

At the moment, using the very latest published @angular/cli will pull in a version of webpack-dev-middleware with the high vulnerability that you see. There is a fixed version of webpack-dev-middleware, but the latest published version of @angular-devkit/build-angular is not using it yet, and the difference between the version @angular-devkit/build-angular is using and the fixed version involves a major-version increment, so there are likely breaking changes. I think we have to wait for the angular project to publish a new version to address the problem.

Update: It looks like 17.3.2 is the fix. I confirmed that in a new project a clean install of @angular/[email protected] does not have the previous vulnerabilities. (My previous answer which said 17.3.2 still had the problem was incorrect.)