4

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?

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Sunflame
  • 2,993
  • 4
  • 24
  • 48
  • Since you're sure your local version installs correctly, add a step to copy the `package-lock.json` file. – codemax Feb 04 '21 at 10:35
  • Hmm it works this way, but are you sure that it is the real solution and not a hack? :) – Sunflame Feb 04 '21 at 10:45
  • Have you used `package-lock.json` or `yarn.lock` before? It's used for precisely this reason - to lock down the dependencies used in projects. While `package.json` indicates the dependencies' versions, bear in mind that when you do a fresh install, npm will install the latest version based on whether you indicate `^ (minor and patch)` or `~ (patch)`. Therefore, the versions will not be the same as the one that you have on local. – codemax Feb 04 '21 at 12:05

3 Answers3

4

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?

codemax
  • 1,322
  • 10
  • 19
  • 1
    Thanks for the answer I also found I have to use COPY package*.json then it will copy both packages. – Sunflame Feb 04 '21 at 12:44
  • I am unable to fix this issue even after copying package-lock.json – Aditya Gaddhyan Oct 13 '22 at 15:23
  • @AdityaGaddhyan instead of npm install, use npm ci. It will refer to the package-lock.json file to install deps – codemax Oct 14 '22 at 23:09
  • same issue @codemax. here is my docker file : ```FROM node:16-alpine ENV NODE_ENV=dev WORKDIR /usr/checked-backend COPY package.json ./ COPY package-lock.json ./ RUN npm ci ENV PATH /usr/checked-backend/node_modules/.bin:$PATH COPY . . COPY ./src/common ./src/common RUN npx tsc CMD ["node","./build/index.js"] ``` – Aditya Gaddhyan Oct 18 '22 at 17:40
0

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

0

Below worked for me.

  1. Remove the package-lock.json file. or
  2. change the step to COPY package.json ./