使用docker-compose启动Angular应用时找不到@angular-devkit/build-angular模块

问题背景 #

已尝试网上常见方案（如全局安装@angular-devkit/build-angular@0.1102.9 --force）但无效。关键现象：直接执行docker run <image>时应用可正常编译运行，但通过docker-compose up启动时出现以下错误：

defuse-ui         | An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
defuse-ui         | Require stack:
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/index.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/models/architect-command.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/commands/serve-impl.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/tools/export-ref.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/tools/index.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/utilities/json-schema.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/models/command-runner.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/lib/cli/index.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/lib/init.js
defuse-ui         | - /usr/local/lib/node_modules/@angular/cli/bin/ng
defuse-ui         | See "/tmp/ng-nVUdCb/angular-errors.log" for further details.
defuse-ui exited with code 127

当前使用的Dockerfile：

FROM node:14.16.1

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json

RUN npm install -g @angular/cli@11.2.9 @angular-devkit/build-angular@0.1102.9 --force
RUN npm install

COPY . /app

CMD ng serve --host 0.0.0.0 --port 4200

解决方案 #

1. 检查Docker Compose的目录挂载配置 #

如果你的docker-compose.yml中存在将本地node_modules目录挂载到容器内的配置（类似volumes: - ./node_modules:/app/node_modules），会直接覆盖容器内安装的依赖包，导致全局或本地的@angular-devkit/build-angular丢失。

解决方法：移除该挂载项，让容器内独立安装完整依赖。

2. 调整Dockerfile，优先使用本地依赖替代全局安装 #

全局安装Angular CLI容易和项目本地依赖版本冲突，改为本地安装相关包并使用本地命令执行：

修改后的Dockerfile：

FROM node:14.16.1

WORKDIR /app

# 先复制package文件，利用Docker缓存优化构建
COPY package*.json ./

# 安装项目所有依赖
RUN npm install

# 本地安装Angular CLI和build依赖到devDependencies
RUN npm install @angular/cli@11.2.9 @angular-devkit/build-angular@0.1102.9 --save-dev

# 复制项目其余文件
COPY . .

# 使用npx调用本地ng命令，避免全局版本问题
CMD ["npx", "ng", "serve", "--host", "0.0.0.0", "--port", "4200"]

3. 清理Docker缓存后重新构建 #

缓存的镜像可能导致依赖安装不完整，执行以下命令彻底重建：

docker-compose build --no-cache
docker-compose up

4. 确保Docker Compose环境变量正确配置 #

在docker-compose.yml中显式指定PATH，确保优先使用项目本地的命令：

services:
  defuse-ui:
    build: .
    environment:
      - PATH=/app/node_modules/.bin:$PATH
    ports:
      - "4200:4200"

问题原因分析 #

docker run正常但docker-compose异常的核心差异在于两者的运行环境配置不同：

• 最常见的是Docker Compose挂载了本地node_modules，覆盖了容器内的依赖
• 其次是环境变量PATH优先级问题，导致使用全局CLI时无法找到对应的build依赖包

内容的提问来源于stack exchange，提问作者s.dallapalma