Docker build fails at npm install

Question

Hi im trying to use docker with an Angular application but it fails at npm install while "locally" when I run npm install I don't get those dependency errors/warnings.

Here is the error log from docker build:

 > [node 4/6] RUN npm install:
#12 9.943 npm notice
#12 9.943 npm notice New patch version of npm available! 7.5.1 -> 7.5.2
#12 9.944 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v7.5.2>
#12 9.944 npm notice Run `npm install -g npm@7.5.2` to update!
#12 9.944 npm notice
#12 9.950 npm ERR! code ERESOLVE
#12 9.956 npm ERR! ERESOLVE unable to resolve dependency tree
#12 9.956 npm ERR!
#12 9.956 npm ERR! While resolving: hotel-manager@0.0.0
#12 9.956 npm ERR! Found: typescript@4.1.3
#12 9.956 npm ERR! node_modules/typescript
#12 9.956 npm ERR!   dev typescript@"^4.1.3" from the root project
#12 9.957 npm ERR!   peer typescript@"~4.0.0 || ~4.1.0" from @angular-devkit/build-angular@0.1101.2
#12 9.957 npm ERR!   node_modules/@angular-devkit/build-angular
#12 9.957 npm ERR!     dev @angular-devkit/build-angular@"^0.1101.2" from the root project
#12 9.957 npm ERR!   2 more (@angular/compiler-cli, ng-packagr)
#12 9.957 npm ERR!
#12 9.957 npm ERR! Could not resolve dependency:
#12 9.957 npm ERR! peer typescript@"~3.9.5" from tsickle@0.39.1
#12 9.957 npm ERR! node_modules/tsickle
#12 9.957 npm ERR!   peerOptional tsickle@"~0.39.0" from ng-packagr@11.1.3
#12 9.958 npm ERR!   node_modules/ng-packagr
#12 9.958 npm ERR!     peerOptional ng-packagr@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1101.2
#12 9.958 npm ERR!     node_modules/@angular-devkit/build-angular
#12 9.958 npm ERR!       dev @angular-devkit/build-angular@"^0.1101.2" from the root project
#12 9.958 npm ERR!
#12 9.958 npm ERR! Fix the upstream dependency conflict, or retry
#12 9.958 npm ERR! this command with --force, or --legacy-peer-deps
#12 9.959 npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
#12 9.959 npm ERR!
#12 9.959 npm ERR! See /root/.npm/eresolve-report.txt for a full report.
#12 9.967
#12 9.967 npm ERR! A complete log of this run can be found in:
#12 9.967 npm ERR!     /root/.npm/_logs/2021-02-04T09_16_48_306Z-debug.log

Here is the log from npm install in vscode:

npm WARN @angular/http@2.4.10 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@2.4.10 requires a peer of @angular/core@2.4.10 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@2.4.10 requires a peer of @angular/platform-browser@2.4.10 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

As I understood the optional lines are for mac users, I'm using windows 10 build 18363 I don't use any @angular/http but "@angular/commons/http" instead and I could not get rid of those warnings but i don`t think that could cause the error.

Here is the package.json file:

{
  "name": "hotel-manager",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.1.2",
    "@angular/cdk": "^11.1.1",
    "@angular/common": "^11.1.2",
    "@angular/compiler": "^11.1.2",
    "@angular/core": "^11.1.2",
    "@angular/forms": "^11.1.2",
    "@angular/localize": "^11.1.2",
    "@angular/material": "^11.1.1",
    "@angular/platform-browser": "^11.1.2",
    "@angular/platform-browser-dynamic": "^11.1.2",
    "@angular/router": "^11.1.2",
    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
    "@types/jquery": "^3.5.5",
    "angular-font-awesome": "^3.1.2",
    "animate.css": "^4.1.1",
    "bootstrap": "^4.6.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "ng-editable-table": "^0.3.15",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1101.2",
    "@angular/cli": "^11.1.2",
    "@angular/compiler-cli": "^11.1.2",
    "@angular/language-service": "^11.1.2",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.16",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.3",
    "karma-chrome-launcher": "~3.1.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": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "^4.1.3"
  }
}

and the nginx.prod.dockerfile:

# Stage 1
FROM node:latest as node
LABEL  author = 'Sunflame'
WORKDIR /app
COPY package.json package.json
RUN npm install
COPY . .
RUN npm run build -- --prod

# Stage 2
FROM nginx:latest
VOLUME /var/cache/nginx
COPY --from=node /app/dist /usr/share/nginx/html
COPY  nginx.conf /etc/nginx/conf.d/default.conf

I build with the following command:

docker build -t nginx-angular -f nginx.prod.dockerfile.

Can you please help what did I do wrong?

Answer 1

As mentioned in the comment, add a step in the docker file to copy the package-lock.json file over to the destination.

The reason why it works on your local machine is because package-lock.json tells npm exactly which versions to install. For example, Typescript is listed as ^4.1.3 in package.json . In your local machine, it could have been installed as exactly 4.1.3 (check your package-lock.json ) file. However, in the production machine, it might have installed version 4.2.1 or something. So even though you listed 4.1.3 , it actually pulls in a higher version because of the ^ prefix, which means you are good with having higher minor and patch versions installed. Therefore, you might be expecting 4.1.3 or whatever version it is on your local machine, the production server might have installed a much newer version because it did not refer to the package-lock.json file that's created in your local machine.

Check out what ^ and ~ means here in this answer - What's the difference between tilde(~) and caret(^) in package.json?

Answer 2

Or you can delete your package-look.json it work for me.