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

Question

我在docker-compose运行 angular 应用程序时收到此错误，但很奇怪在使用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

我对这个问题完全困惑。 我尝试了所有与npm update --save dev等。问题仍然存在。

我在 AngluarJs/Node 开发方面没有太多经验。 如果有人能指出我做错了什么，那就太好了。

谢谢

Answer 1

我在我的平均堆栈应用程序中遇到了同样的错误。 最后，我能够解决这个问题。

该问题与 docker-compose.yml 文件中的卷挂载有关。

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

因此， ./angular-client/:/var/www/app行将本地 angular 文件夹安装到容器的文件夹中。 如果我们在本地 angular 项目中没有 node_modules，这意味着在 docker docker-compose up之后docker-compose up我们的本地 angular 文件夹将覆盖容器的文件夹。 基本上，即使您在容器内运行npm install来安装所有依赖项，最后，容器文件夹也将被本地 angular 文件夹覆盖。 你会丢失 node_modules 包。

要解决此问题，您需要排除 node_modules 文件夹。 添加下面的行就足以排除它。

- /var/www/app/node_modules/

PS：docker-compose.yml 文件不读取 .dockerignore 文件。 .dockerignore 文件由 Dockerfile 使用。