Followed the tutorial on official Docker website for a NodeJS application and tried modifying it for my Angular application: /

This is an error that I just didn't manage to fix.

I use the command:

docker compose up --build

to start the Docker container

I tried:

1. Adding optionalDependencies in package.json
2. Removing node_modules and package-lock.json and running npm i again
3. Asking ChatGPT but he just kept me in a loop with modifying compose.yaml and Dockerfile

I am fairly new to Docker so it could be my config really is wrong

My Dockerfile:

# syntax=docker/dockerfile:1

ARG NODE_VERSION=22.14.0

FROM node:${NODE_VERSION}-alpine as base
WORKDIR /usr/src/app
EXPOSE 4200

FROM base as dev
RUN --mount=type=bind,source=package.json,target=package.json \
    --mount=type=bind,source=package-lock.json,target=package-lock.json \
    --mount=type=cache,target=/root/.npm \
    npm install -g kill-port \
    npm install -g @angular/cli \
    npm ci --include=dev
USER node
COPY . .
CMD npm run start

My compose.yaml file:

services:
  server:
    build:
      context: .
      target: dev
    ports:
      - 4200:4200
    volumes:
      - ./:/usr/src/app/src/

Package.json

{
  "name": "valamar-in-stay-booking-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-prod": "ng build --configuration production",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "prepare": "husky",
    "lint": "ng lint",
    "prettify": "prettier --write ./src/app",
    "pre-commit": "lint-staged"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/cdk": "^18.2.6",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/material": "^18.2.6",
    "@angular/material-moment-adapter": "^18.1.4",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@ngrx/effects": "^18.0.2",
    "@ngrx/store": "^18.0.2",
    "@ngrx/store-devtools": "^18.0.2",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@typescript-eslint/utils": "^8.17.0",
    "bootstrap": "^5.3.3",
    "keycloak-js": "^24.0.2",
    "moment": "^2.30.1",
    "nanoid": "^5.0.9",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.2",
    "@angular/cli": "^18.2.2",
    "@angular/compiler-cli": "^18.2.0",
    "@types/jasmine": "~5.1.0",
    "angular-eslint": "18.3.1",
    "eslint": "^9.9.1",
    "husky": "^9.1.6",
    "i": "^0.3.7",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "lint-staged": "^15.2.10",
    "npm": "^10.8.3",
    "prettier": "^3.3.3",
    "prettier-plugin-anize-imports": "^4.1.0",
    "typescript": "~5.5.2",
    "typescript-eslint": "8.2.0"
  },
  "optionalDependencies": {
    "@rollup/rollup-linux-x64-gnu": "*"
  }
}

I just want to create a containerized application so that I can run it on virtually any machine using only Docker.