发生未处理的异常：无法从“/ang-frontend”找到模块“@angular-devkit/build-angular”。 使用 docker 和 docker-compose

Question

I am getting this error while running an angular application in docker-compose , but strange enough not getting the error while running with docker run .

docker-compose

Ang-frontend            | 
Ang-frontend            | > Ang-frontend@0.0.0 serve-docker /Ang-frontend
Ang-frontend            | > ng serve  --proxy-config docker-proxy.conf.json --disable-host-check --host 0.0.0.0 --public-host http://localhost:4200
Ang-frontend            | 
Ang-frontend            | An unhandled exception occurred: Could not find module "@angular-devkit/build-angular" from "/Ang-frontend".
Ang-frontend            | Fatal error writing debug log file: ENOENT: no such file or directory, lstat '/tmp'
Ang-frontend            | Error: Could not find module "@angular-devkit/build-angular" from "/Ang-frontend".
Ang-frontend            |     at Object.resolve (/usr/local/nvm/versions/node/v12.14.1/lib/node_modules/@angular/cli/node_modules/@angular-devkit/core/node/resolve.js:154:11)
Ang-frontend            |     at WorkspaceNodeModulesArchitectHost.resolveBuilder (/usr/local/nvm/versions/node/v12.14.1/lib/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:31:40)
Ang-frontend            |     at ServeCommand.initialize (/usr/local/nvm/versions/node/v12.14.1/lib/node_modules/@angular/cli/models/architect-command.js:71:63)
Ang-frontend            |     at async ServeCommand.validateAndRun (/usr/local/nvm/versions/node/v12.14.1/lib/node_modules/@angular/cli/models/command.js:124:9)
Ang-frontend            |     at async Object.runCommand (/usr/local/nvm/versions/node/v12.14.1/lib/node_modules/@angular/cli/models/command-runner.js:186:24)
Ang-frontend            |     at async default_1 (/usr/local/nvm/versions/node/v12.14.1/lib/node_modules/@angular/cli/lib/cli/index.js:54:31)
Ang-frontend            | npm ERR! code ELIFECYCLE
Ang-frontend            | npm ERR! syscall spawn
Ang-frontend            | npm ERR! file sh
Ang-frontend            | npm ERR! errno ENOENT
Ang-frontend            | npm ERR! Ang-frontend@0.0.0 serve-docker: `ng serve  --proxy-config docker-proxy.conf.json --disable-host-check --host 0.0.0.0 --public-host http://localhost:4200`
Ang-frontend            | npm ERR! spawn ENOENT
Ang-frontend            | npm ERR! 
Ang-frontend            | npm ERR! Failed at the Ang-frontend@0.0.0 serve-docker script.
Ang-frontend            | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Ang-frontend            | npm WARN Local package.json exists, but node_modules missing, did you mean to install?
Ang-frontend            | 
Ang-frontend            | npm ERR! A complete log of this run can be found in:
Ang-frontend            | npm ERR!     /root/.npm/_logs/2020-02-02T19_10_50_952Z-debug.log

docker run -p 4200:4200 Ang-frontend

> Ang-frontend@0.0.0 serve-docker /Ang-frontend
> ng serve  --proxy-config docker-proxy.conf.json --disable-host-check --host 0.0.0.0 --public-host http://localhost:4200

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
WARNING: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
ℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 429 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 165 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 998 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.83 MB [initial] [rendered]
Date: 2020-02-02T19:09:33.684Z - Hash: 255ef6ce2bc8407e8f48 - Time: 12189ms
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

package.json

{
  "name": "Ang-frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "serve-docker": "ng serve  --proxy-config docker-proxy.conf.json --disable-host-check --host 0.0.0.0 --public-host http://localhost:4200"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.23",
    "@angular/cli": "~8.3.23",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

dockerfile

FROM debian:buster-slim

SHELL [ "/bin/bash", "--login", "-c" ]

#RUN rm /bin/sh && ln -s /bin/bash /bin/sh
ENV NVM_DIR=/usr/local/nvm NODE_VERSION=12.14.1 NODE_PATH=$NVM_DIR/v$NODE_VERSION/lib/node_modules PATH=$NVM_DIR/v$NODE_VERSION/bin:$PATH

RUN apt-get update && \
    apt-get install -y --no-install-recommends build-essential software-properties-common ca-certificates apt-transport-https curl && \
    mkdir -p $NVM_DIR && \
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.1/install.sh | bash && \
    source $NVM_DIR/nvm.sh && \
    nvm install v$NODE_VERSION && \
    nvm alias default v$NODE_VERSION && \
    nvm use default && \
    npm install npm -g && \
    apt-get autoremove && \
    apt-get clean && \
    rm -rf node_modules/ && \
    rm -rf /var/lib/apt/lists/*

#
# Application directory
#
WORKDIR /Ang-frontend

ENV PATH=/Ang-frontend/node_modules/.bin:$PATH
#
# copy contents
#
COPY . .

#
# install package dependencies
#
RUN npm install -g @angular/cli@8.3.23 && \
    npm update && \
    rm -rf /tmp/

EXPOSE 4200

#
# Start the application
#
CMD npm run serve-docker

I am totally confused about this issue. I tried everything with npm update --save dev etc. The problem still persists.

I dont have much experience in AngluarJs/Node development. If anyone can point me what am I doing wrong then it would be great.

Thank you

Answer 1

I was getting the same error in my mean stack application. Finally, I was able to solve this issue.

The problem is related to volume mounting in docker-compose.yml file.

version: '3'

services: 
    angular:
        build: angular-client
        container_name: ecommerce-client
        ports:
            - "4200:4200"
        volumes:
            - ./angular-client/:/var/www/app
            - /var/www/app/node_modules/ <-- this should be added

So, ./angular-client/:/var/www/app line mounts local angular folder to container's folder. If we don't have node_modules inside local angular project, it means after docker-compose up our local angular folder will override container's folder. Basically, even if you run npm install inside the container to install all dependencies, at the end, the container folder will be overridden by the local angular folder. And you will lose node_modules package.

To solve this issue, you need to exclude node_modules folder. Adding the line below will be enough to exclude it.

- /var/www/app/node_modules/

PS: docker-compose.yml file doesn't read .dockerignore file. .dockerignore file is used by Dockerfile.