Docker: Angular container works, but machine node_modules are empty and a new volume is created each time

Issue

I have an Angular container for development and hot-reload enabled. one of the problems I've found is that, on Visual Studio code, all my files have a lot of errors, since the node_modules folder is empty. However, the application works and run fine. The errors go If do npm install directly on my folder. Ideally I'd like to install the components and have them available on my machine and also the container.

In addition, each time I run my container with docker compose -f development.yml up -d a new volume is created, so I end up with a lot of volumes when I constantly turn on and off the service.

My Dockerfile is this:

FROM node:16

WORKDIR /app
COPY package.json ./

RUN npm install

COPY . .

EXPOSE 4200

Then I build the Dockerfile to have an image called angular_frontend.

And my Docker compose file is:

    services:
      angular-frontend:
        image: angular_frontend
        command: "npm run start-docker-dev"
        ports:
          - 4200:4200
        volumes:
          - /app/node_modules
          - .:/app
        hostname: frontend-localhost.domain.com

Also the package.json I'm using is:

    {
      "name": "frontend",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start-dev": "PROJECT=frontend ng serve --ssl --host frontend.domain.com",
        "start-docker-dev": "PROJECT=frontend ng serve --ssl --proxy-config docker.dev.proxy.conf.json --host frontend.domain.com --public-host frontend.domain.com",
        "build-prod": "PROJECT=frontend NODE_ENV=production ng build --configuration=production",
        "build-qa": "PROJECT=frontend NODE_ENV=production ng build --configuration=qa",
        "build-dev": "PROJECT=frontend ng build",
        "lint": "ng lint",
        "test": "jest --coverage --reporters=default --reporters=jest-junit --detectOpenHandles",
        "test-watch": "jest --watch",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~12.2.13",
        "@angular/common": "~12.2.13",
        "@angular/compiler": "~12.2.13",
        "@angular/core": "~12.2.13",
        "@angular/forms": "~12.2.13",
        "@angular/platform-browser": "~12.2.13",
        "@angular/platform-browser-dynamic": "~12.2.13",
        "@angular/router": "~12.2.13",
        "@ed/subtract": "^2.4.1",
        "@fnando/sparkline": "^0.3.10",
        "chart.js": "^3.4.1",
        "chartjs-plugin-datalabels": "^2.0.0",
        "lodash": "^4.17.21",
        "ngx-cookie-service": "^12.0.0",
        "rxjs": "~6.6.6",
        "tailwindcss": "^2.0.4",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.4"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~12.2.13",
        "@angular-eslint/builder": "12.6.1",
        "@angular-eslint/eslint-plugin": "12.6.1",
        "@angular-eslint/eslint-plugin-template": "12.6.1",
        "@angular-eslint/schematics": "12.6.1",
        "@angular-eslint/template-parser": "12.6.1",
        "@angular/cli": "~12.2.13",
        "@angular/compiler-cli": "~12.2.13",
        "@types/chart.js": "^2.9.32",
        "@types/fnando__sparkline": "^0.3.3",
        "@types/jest": "^26.0.20",
        "@types/lodash": "^4.14.168",
        "@types/node": "^12.11.1",
        "@typescript-eslint/eslint-plugin": "4.28.2",
        "@typescript-eslint/parser": "4.28.2",
        "codelyzer": "^6.0.0",
        "eslint": "^7.26.0",
        "eslint-config-airbnb-typescript": "^12.3.1",
        "eslint-plugin-import": "2.22.1",
        "eslint-plugin-jsdoc": "30.7.6",
        "eslint-plugin-prefer-arrow": "1.2.2",
        "jest": "^26.6.3",
        "jest-junit": "^12.0.0",
        "jest-preset-angular": "^8.3.2",
        "ts-node": "~8.3.0",
        "typescript": "~4.3.5"
      },
      "jest": {
        "preset": "jest-preset-angular",
        "setupFilesAfterEnv": [
          "<rootDir>/setup-jest.ts"
        ],
        "roots": [
          "<rootDir>/projects/a",
          "<rootDir>/projects/b"
        ],
        "modulePaths": [
          "<rootDir>/projects/a",
          "<rootDir>/projects/b"
        ]
      }
    }

Solution

Since you stated that your use case is for development purposes - I recommend to restructure your approach a little.

1. Dockerfile

It only makes sense to run npm install in the Dockerfile if you will be using this image for shipping the complete code with modules. Since you're using it for development - it's useless here. Also - since you will be mounting the entire local folder into the container - remove the ADD and COPY commands.

FROM node:16

WORKDIR /app

EXPOSE 4200

2. docker-compose

You should remove the /app/node_modules volume and change the command the container will use:

services:
  angular-frontend:
    image: angular_frontend
    command: "bash -c 'npm install && npm run start-docker-dev'"
    ports:
      - 4200:4200
    volumes:
      - .:/app
    hostname: frontend-localhost.domain.com

this way - your entire project folder is mapped to the /app folder as a volume. The npm install command will run when the container starts.

Answered By - andrzejwp