title: Docker: Angular container works, but machine node_modules are empty and a new volume is created each time
body: <p>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 <code>node_modules</code> folder is empty. However, the application works and run fine.
  The errors go If do <code>npm install</code> directly on my folder. Ideally I'd like to install the components and have them available on my machine and also the container.</p>
  <p>In addition, each time I run my container with <code>docker compose -f development.yml up -d</code> a new volume is created, so I end up with a lot of volumes when I constantly turn on and off the service.</p>
  <p>My Dockerfile is this:</p>
  <pre><code>FROM node:16
  
  WORKDIR /app
  COPY package.json ./
  
  RUN npm install
  
  COPY . .
  
  EXPOSE 4200
  </code></pre>
  <p>Then I build the Dockerfile to have an image called <code>angular_frontend</code>.</p>
  <p>And my Docker compose file is:</p>
  <pre><code>    services:
        angular-frontend:
          image: angular_frontend
          command: &quot;npm run start-docker-dev&quot;
          ports:
            - 4200:4200
          volumes:
            - /app/node_modules
            - .:/app
          hostname: frontend-localhost.domain.com
  </code></pre>
  <p>Also the <code>package.json</code> I'm using is:</p>
  <pre><code>    {
        &quot;name&quot;: &quot;frontend&quot;,
        &quot;version&quot;: &quot;0.0.0&quot;,
        &quot;scripts&quot;: {
          &quot;ng&quot;: &quot;ng&quot;,
          &quot;start-dev&quot;: &quot;PROJECT=frontend ng serve --ssl --host frontend.domain.com&quot;,
          &quot;start-docker-dev&quot;: &quot;PROJECT=frontend ng serve --ssl --proxy-config docker.dev.proxy.conf.json --host frontend.domain.com --public-host frontend.domain.com&quot;,
          &quot;build-prod&quot;: &quot;PROJECT=frontend NODE_ENV=production ng build --configuration=production&quot;,
          &quot;build-qa&quot;: &quot;PROJECT=frontend NODE_ENV=production ng build --configuration=qa&quot;,
          &quot;build-dev&quot;: &quot;PROJECT=frontend ng build&quot;,
          &quot;lint&quot;: &quot;ng lint&quot;,
          &quot;test&quot;: &quot;jest --coverage --reporters=default --reporters=jest-junit --detectOpenHandles&quot;,
          &quot;test-watch&quot;: &quot;jest --watch&quot;,
          &quot;e2e&quot;: &quot;ng e2e&quot;
        },
        &quot;private&quot;: true,
        &quot;dependencies&quot;: {
          &quot;@angular/animations&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/common&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/compiler&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/core&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/forms&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/platform-browser&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/platform-browser-dynamic&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/router&quot;: &quot;~12.2.13&quot;,
          &quot;@ed/subtract&quot;: &quot;^2.4.1&quot;,
          &quot;@fnando/sparkline&quot;: &quot;^0.3.10&quot;,
          &quot;chart.js&quot;: &quot;^3.4.1&quot;,
          &quot;chartjs-plugin-datalabels&quot;: &quot;^2.0.0&quot;,
          &quot;lodash&quot;: &quot;^4.17.21&quot;,
          &quot;ngx-cookie-service&quot;: &quot;^12.0.0&quot;,
          &quot;rxjs&quot;: &quot;~6.6.6&quot;,
          &quot;tailwindcss&quot;: &quot;^2.0.4&quot;,
          &quot;tslib&quot;: &quot;^2.0.0&quot;,
          &quot;zone.js&quot;: &quot;~0.11.4&quot;
        },
        &quot;devDependencies&quot;: {
          &quot;@angular-devkit/build-angular&quot;: &quot;~12.2.13&quot;,
          &quot;@angular-eslint/builder&quot;: &quot;12.6.1&quot;,
          &quot;@angular-eslint/eslint-plugin&quot;: &quot;12.6.1&quot;,
          &quot;@angular-eslint/eslint-plugin-template&quot;: &quot;12.6.1&quot;,
          &quot;@angular-eslint/schematics&quot;: &quot;12.6.1&quot;,
          &quot;@angular-eslint/template-parser&quot;: &quot;12.6.1&quot;,
          &quot;@angular/cli&quot;: &quot;~12.2.13&quot;,
          &quot;@angular/compiler-cli&quot;: &quot;~12.2.13&quot;,
          &quot;@types/chart.js&quot;: &quot;^2.9.32&quot;,
          &quot;@types/fnando__sparkline&quot;: &quot;^0.3.3&quot;,
          &quot;@types/jest&quot;: &quot;^26.0.20&quot;,
          &quot;@types/lodash&quot;: &quot;^4.14.168&quot;,
          &quot;@types/node&quot;: &quot;^12.11.1&quot;,
          &quot;@typescript-eslint/eslint-plugin&quot;: &quot;4.28.2&quot;,
          &quot;@typescript-eslint/parser&quot;: &quot;4.28.2&quot;,
          &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
          &quot;eslint&quot;: &quot;^7.26.0&quot;,
          &quot;eslint-config-airbnb-typescript&quot;: &quot;^12.3.1&quot;,
          &quot;eslint-plugin-import&quot;: &quot;2.22.1&quot;,
          &quot;eslint-plugin-jsdoc&quot;: &quot;30.7.6&quot;,
          &quot;eslint-plugin-prefer-arrow&quot;: &quot;1.2.2&quot;,
          &quot;jest&quot;: &quot;^26.6.3&quot;,
          &quot;jest-junit&quot;: &quot;^12.0.0&quot;,
          &quot;jest-preset-angular&quot;: &quot;^8.3.2&quot;,
          &quot;ts-node&quot;: &quot;~8.3.0&quot;,
          &quot;typescript&quot;: &quot;~4.3.5&quot;
        },
        &quot;jest&quot;: {
          &quot;preset&quot;: &quot;jest-preset-angular&quot;,
          &quot;setupFilesAfterEnv&quot;: [
            &quot;&lt;rootDir&gt;/setup-jest.ts&quot;
          ],
          &quot;roots&quot;: [
            &quot;&lt;rootDir&gt;/projects/a&quot;,
            &quot;&lt;rootDir&gt;/projects/b&quot;
          ],
          &quot;modulePaths&quot;: [
            &quot;&lt;rootDir&gt;/projects/a&quot;,
            &quot;&lt;rootDir&gt;/projects/b&quot;
          ]
        }
      }
  </code></pre>