title: Angular app running inside docker works when running on WSL2 ubuntu 20.04 and crash with Cannot find module '@angular/compiler-cli' on Ubuntu 18.04.2
body: <p>I've been pulling my hair on this probleme for 10+ hours. I'm using docker to have the same behaviour on different machine but here I can't make it work.</p>
  <p>I have created a docker-compose developpment stack on my WSL2 ubuntu 20.04.2 in order to launch an angular/flask/mysql app, it works fine.</p>
  <p>I wanted to run this stack on a remote server I have in order to develop on this machine , kind of a test/dev server which is Ubuntu  18.04.2. The different os should not matter as I run everything inside dockers.</p>
  <p>But when I run with 'sudo docker-compose up' on the Ubuntu 18.04.2 I have the following error related to my angular container:</p>
  <pre><code>angular-front | An unhandled exception occurred: Cannot find module '@angular/compiler-cli'
  angular-front | Require stack:
  angular-front | - /app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js
  angular-front | - /app/node_modules/@ngtools/webpack/src/index.js
  angular-front | - /app/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js
  angular-front | - /app/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/index.js
  angular-front | - /app/node_modules/@angular-devkit/build-angular/src/browser/index.js
  angular-front | - /app/node_modules/@angular-devkit/build-angular/src/dev-server/index.js
  angular-front | - /app/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
  angular-front | - /app/node_modules/@angular-devkit/architect/node/index.js
  angular-front | - /app/node_modules/@angular/cli/models/architect-command.js
  angular-front | - /app/node_modules/@angular/cli/commands/serve-impl.js
  angular-front | - /app/node_modules/@angular-devkit/schematics/tools/export-ref.js
  angular-front | - /app/node_modules/@angular-devkit/schematics/tools/index.js
  angular-front | - /app/node_modules/@angular/cli/utilities/json-schema.js
  angular-front | - /app/node_modules/@angular/cli/models/command-runner.js
  angular-front | - /app/node_modules/@angular/cli/lib/cli/index.js
  angular-front | - /app/node_modules/@angular/cli/lib/init.js
  angular-front | - /app/node_modules/@angular/cli/bin/ng
  angular-front | See &quot;/tmp/ng-EEaQZX/angular-errors.log&quot; for further details.
  angular-front | npm ERR! code ELIFECYCLE
  angular-front | npm ERR! syscall spawn
  angular-front | npm ERR! file sh
  angular-front | npm ERR! errno ENOENT
  angular-front | npm ERR! Scrapy@6.2.0 start: `ng serve`
  angular-front | npm ERR! spawn ENOENT
  angular-front | npm ERR!
  angular-front | npm ERR! Failed at the Scrapy@6.2.0 start script.
  angular-front | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  angular-front |
  angular-front | npm ERR! A complete log of this run can be found in:
  angular-front | npm ERR!     /root/.npm/_logs/2021-09-15T10_27_31_226Z-debug.log
  </code></pre>
  <p>Here is my docker-compose.yml, the service 'angular' is the one we might need to focus on:</p>
  <pre><code># Use root/example as user/password credentials
  version: '3.1'
  
  services:
  
    db:
      image: mariadb
      restart: always
      environment:
        MYSQL_ROOT_PASSWORD: !!!
        MYSQL_DATABASE: !!!!!!!!!
        MYSQL_USER: !!!!!!!
        MYSQL_PASSWORD: !!!!!!
      container_name: database_db
      ports:
      - &quot;3307:3306&quot;
    python:
      container_name: python-back
      build:
        context: ./myappback
      command: nodemon -L -e js,py --exec python3 -m flask run --host=0.0.0.0
      ports:
       - &quot;5000:5000&quot;
      working_dir: /app
      volumes:
        - ./myappback:/app
    angular:
      container_name: angular-front
      build:
        context: ./myappfront
        dockerfile: dockerfile_dev
      ports:
       - &quot;4200:4200&quot;
      working_dir: /app
      volumes:
       - ./myappfront:/app
       - /app/node_modules
  
  </code></pre>
  <p>Here is the dockerfile_dev that is used to build the angular app:</p>
  <pre><code>FROM node:12.14.1
  
  WORKDIR /app
  RUN mkdir node_modules
  COPY package.json ./
  
  RUN ls
  RUN ls /app
  RUN npm install -g --unsafe-perm @angular/cli@8.3.29  nodemon 
  RUN ng --version
  RUN npm install 
  
  EXPOSE 4200 49153
  
  RUN ng --version
  CMD [&quot;npm&quot;,&quot;start&quot;]
  </code></pre>
  <p>I tried to debug the package version with &quot;ng --version&quot; and everything is similar on both servers:</p>
  <pre><code>     _                      _                 ____ _     ___
      / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
     / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
    / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
   /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                  |___/
  
  
  Angular CLI: 8.3.29
  Node: 12.14.1
  OS: linux x64
  Angular: 8.2.14
  ... animations, common, compiler, compiler-cli, core, forms
  ... language-service, platform-browser, platform-browser-dynamic
  ... router, service-worker
  
  Package                           Version
  -----------------------------------------------------------
  @angular-devkit/architect         0.803.29
  @angular-devkit/build-angular     0.803.29
  @angular-devkit/build-optimizer   0.803.29
  @angular-devkit/build-webpack     0.803.29
  @angular-devkit/core              8.3.29
  @angular-devkit/schematics        8.3.29
  @angular/cdk                      8.2.3
  @angular/cli                      8.3.29
  @angular/flex-layout              8.0.0-beta.27
  @angular/material                 8.2.3
  @angular/pwa                      0.803.29
  @ngtools/webpack                  8.3.29
  @schematics/angular               8.3.29
  @schematics/update                0.803.29
  rxjs                              6.5.5
  typescript                        3.5.3
  webpack                           4.39.2
  </code></pre>
  <p>I use Angular 8 cause I have not migrated yet to the latest version.</p>
  <p>Here is also my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;Scrapy&quot;,
    &quot;version&quot;: &quot;6.2.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build --prod&quot;,
      &quot;build_test&quot;: &quot;ng build --configuration=test&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@agm/core&quot;: &quot;1.0.0&quot;,
      &quot;@amcharts/amcharts4&quot;: &quot;^4.10.18&quot;,
      &quot;@angular-devkit/build-angular&quot;: &quot;0.803.29&quot;,
      &quot;@angular/animations&quot;: &quot;8.2.14&quot;,
      &quot;@angular/cdk&quot;: &quot;8.2.3&quot;,
      &quot;@angular/common&quot;: &quot;8.2.14&quot;,
      &quot;@angular/compiler&quot;: &quot;8.2.14&quot;,
      &quot;@angular/core&quot;: &quot;8.2.14&quot;,
      &quot;@angular/flex-layout&quot;: &quot;^8.0.0-beta.27&quot;,
      &quot;@angular/forms&quot;: &quot;8.2.14&quot;,
      &quot;@angular/material&quot;: &quot;^8.2.3&quot;,
      &quot;@angular/platform-browser&quot;: &quot;8.2.14&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;8.2.14&quot;,
      &quot;@angular/pwa&quot;: &quot;0.803.29&quot;,
      &quot;@angular/router&quot;: &quot;8.2.14&quot;,
      &quot;@angular/service-worker&quot;: &quot;8.2.14&quot;,
      &quot;@ngx-translate/core&quot;: &quot;^11.0.1&quot;,
      &quot;@ngx-translate/http-loader&quot;: &quot;^4.0.0&quot;,
      &quot;@nicky-lenaers/ngx-scroll-to&quot;: &quot;^3.0.1&quot;,
      &quot;angular-calendar&quot;: &quot;~0.28.0&quot;,
      &quot;angular-sortablejs&quot;: &quot;^2.7.0&quot;,
      &quot;chart.js&quot;: &quot;~2.9.3&quot;,
      &quot;chart.piecelabel.js&quot;: &quot;~0.15.0&quot;,
      &quot;chartjs&quot;: &quot;^0.3.24&quot;,
      &quot;chartjs-plugin-annotation&quot;: &quot;^0.5.7&quot;,
      &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
      &quot;highlight.js&quot;: &quot;^11.2.0&quot;,
      &quot;lodash&quot;: &quot;^4.17.21&quot;,
      &quot;lodash-es&quot;: &quot;~4.17.15&quot;,
      &quot;material-design-icons&quot;: &quot;^3.0.1&quot;,
      &quot;moment&quot;: &quot;~2.24.0&quot;,
      &quot;ngx-file-drop&quot;: &quot;^8.0.8&quot;,
      &quot;ngx-quill&quot;: &quot;~7.3.9&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;normalize.css&quot;: &quot;~8.0.1&quot;,
      &quot;quill&quot;: &quot;~1.3.7&quot;,
      &quot;rxjs&quot;: &quot;~6.5.3&quot;,
      &quot;rxjs-compat&quot;: &quot;~6.5.3&quot;,
      &quot;screenfull&quot;: &quot;~5.0.0&quot;,
      &quot;simplebar&quot;: &quot;5.0.7&quot;,
      &quot;smoothscroll-polyfill&quot;: &quot;^0.4.4&quot;,
      &quot;sortablejs&quot;: &quot;~1.10.1&quot;,
      &quot;stream&quot;: &quot;0.0.2&quot;,
      &quot;vis-data&quot;: &quot;^6.5.3&quot;,
      &quot;vis-network&quot;: &quot;^7.6.10&quot;,
      &quot;vis-util&quot;: &quot;^4.1.0&quot;,
      &quot;zone.js&quot;: &quot;~0.10.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular/cli&quot;: &quot;8.3.29&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;8.2.14&quot;,
      &quot;@angular/language-service&quot;: &quot;8.2.14&quot;,
      &quot;@types/chart.js&quot;: &quot;~2.9.1&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.4.6&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.8&quot;,
      &quot;@types/lodash-es&quot;: &quot;~4.17.3&quot;,
      &quot;@types/node&quot;: &quot;~12.12.9&quot;,
      &quot;codelyzer&quot;: &quot;~5.2.0&quot;,
      &quot;jasmine-core&quot;: &quot;~3.5.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
      &quot;karma&quot;: &quot;~4.4.1&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;~2.1.0&quot;,
      &quot;karma-jasmine&quot;: &quot;~2.0.1&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.4.2&quot;,
      &quot;protractor&quot;: &quot;~5.4.2&quot;,
      &quot;ts-node&quot;: &quot;~8.5.2&quot;,
      &quot;tslint&quot;: &quot;~5.20.1&quot;,
      &quot;typescript&quot;: &quot;3.5.3&quot;
    }
  }
  
  </code></pre>
  <p>Maybe it's an issue between angular/cli version and angular/compiler-cli ?</p>
  <p>Any angular expert could help me debug this ? I have tried several things</p>
  <ul>
  <li>running &quot;npm install -g&quot; and &quot;npm install&quot; in the angular dockerfile</li>
  <li>&quot;npm install -g @angular/compiler-cli&quot; in dockerfile_dev</li>
  <li>check everything ten times, rebuild images of the angular</li>
  </ul>