npm ci command failing with "Cannot read property '@angular/animations' of undefined"

Question

While performing docker build for my Angular project, In the npm ci step, I'm getting below error: Cannot read property '@angular/animations' of undefined

As there is no proper error, we are unable to find the solution.

Versions of package and node:

• @angular/animations - 15.2.9
• Node.Js - 18.14.2
• NPM - 9.5
• Angular Cli - 15.2.8

What I have tried till now:

• Cross check package.json file for Animations module
• Try downgrading the @angular/animations version
• Deleting package-lock.json file and node_module directory
• Deleting cache and tried

DockerFile:

FROM docker-images.artifactory.dummydomain.com/db/node:14.18-alpine as build

WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install -g @angular/[email protected]
RUN npm ci 
RUN ng build --configuration=test
USER node
COPY --chown=node:node . .

Package.json Files dependencies:

    "@angular/animations": "^15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",
    "@angular/forms": "^15.2.9",
    "@angular/localize": "^15.2.9",
    "@angular/material": "^15.2.9",
    "@angular/material-moment-adapter": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "^15.2.9",
    "@angular/router": "^15.2.9",
    "angular-in-memory-web-api": "^0.9.0",
    "core-js": "^3.6.2",
    "export-from-json": "^1.7.0",
    "hammerjs": "^2.0.8",
    "material-design-icons-iconfont": "^6.7.0",
    "moment": "^2.24.0",
    "ng-uikit-pro-standard": "^1.0.0",
    "ngx-spinner": "^15.0.1",
    "rxjs": "~6.6.7",
    "socket.io-client": "^4.5.4",
    "sweetalert2": "^11.6.9",
    "tslib": "^2.0.0",
    "vkbeautify": "^0.99.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.8",
    "@angular/cli": "^15.2.8",
    "@angular/compiler-cli": "^15.2.9",
    "@angular/language-service": "^15.2.9",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.9.5"
  }

It would be great if someone can help. TIA!

Answer 1

This error occurs if npm tries to process a lockfile which it cannot understand (the error message is not helpful at all). The format of the lockfile is changing over time, and npm marks the current version with the lockfileVersion parameter in the lockfile:

• No version provided: an "ancient" shrinkwrap file from a version of npm prior to npm v5.
• 1: The lockfile version used by npm v5 and v6.
• 2: The lockfile version used by npm v7 and v8. Backwards compatible to v1 lockfiles.
• 3: The lockfile version used by npm v9 and above. Backwards compatible to npm v7.

You are using v14.18 as a base image, which is shipped with npm v6. In your system you have npm v9, so the lockfileVersion is 3. As you can read in the above list, this format is not compatible with npm v6.

The recommended fix would be to update the version of the Node base image to v16 (npm 8) or v18 (npm 9). Alternatively, you could perform an npm install using npm v8, and commit + push the resulting lockfile.