Angular 16应用本地构建成功但Docker构建失败求助

问题描述 #

使用微调后的Dockerfile构建Angular 16应用时，执行npm run build触发TypeError: Cannot read properties of undefined (reading 'forEach')错误，构建失败，但本地直接构建可正常完成。无法识别环境差异或进一步调试，谷歌相关错误未找到有效解决办法。

Dockerfile内容 #

FROM node:18.16-slim

RUN mkdir -p /usr/src/app/dist

WORKDIR /usr/src/app

COPY package.json /usr/src/app
COPY package-lock.json /usr/src/app

RUN npm install

COPY . /usr/src/app

RUN npm run build

CMD ["npm", "start"]

Docker构建错误日志 #

2023-05-18T10:37:25Z #13 [8/8] RUN npm run build
2023-05-18T10:37:26Z #13 1.289
2023-05-18T10:37:26Z #13 1.289 > urbo@2.18.0-next build
2023-05-18T10:37:26Z #13 1.289 > npx nx run urbo:build
2023-05-18T10:37:26Z #13 1.289
2023-05-18T10:37:29Z #13 4.731
2023-05-18T10:37:30Z #13 4.732 > nx run urbo:build:production
2023-05-18T10:37:30Z #13 4.732
2023-05-18T10:37:33Z #13 8.411 - Generating browser application bundles (phase: setup)...
2023-05-18T10:37:45Z #13 20.63 ✔ Browser application bundle generation complete.
2023-05-18T10:37:46Z #13 20.76 ✔ Browser application bundle generation complete.
2023-05-18T10:37:46Z #13 20.77
2023-05-18T10:37:46Z #13 20.77 ./apps/urbo/src/main.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
2023-05-18T10:37:46Z #13 20.77 TypeError: Cannot read properties of undefined (reading 'forEach')
2023-05-18T10:37:46Z #13 20.77
2023-05-18T10:37:46Z #13 20.77 ./node_modules/css-loader/dist/runtime/api.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
2023-05-18T10:37:46Z #13 20.77 TypeError: Cannot read properties of undefined (reading 'forEach')
2023-05-18T10:37:46Z #13 20.77
2023-05-18T10:37:46Z #13 20.77 ./node_modules/css-loader/dist/runtime/noSourceMaps.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
2023-05-18T10:37:46Z #13 20.77 TypeError: Cannot read properties of undefined (reading 'forEach')
2023-05-18T10:37:46Z #13 20.77
2023-05-18T10:37:46Z #13 20.77 ./node_modules/zone.js/fesm2015/zone.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
2023-05-18T10:37:46Z #13 20.77 TypeError: Cannot read properties of undefined (reading 'forEach')
2023-05-18T10:37:46Z #13 20.77
2023-05-18T10:37:46Z #13 20.77 ./apps/urbo/src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
2023-05-18T10:37:46Z #13 20.77 HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
2023-05-18T10:37:46Z #13 20.77 TypeError: Cannot read properties of undefined (reading 'forEach')
2023-05-18T10:37:46Z #13 20.77
2023-05-18T10:37:46Z #13 20.77
2023-05-18T10:37:46Z #13 20.93
2023-05-18T10:37:46Z #13 20.93
2023-05-18T10:37:46Z #13 20.93
2023-05-18T10:37:46Z #13 20.93 > NX Running target build for project urbo failed
2023-05-18T10:37:46Z #13 20.93
2023-05-18T10:37:46Z #13 20.94 Failed tasks:
2023-05-18T10:37:46Z #13 20.94
2023-05-18T10:37:46Z #13 20.94 - urbo:build:production
2023-05-18T10:37:46Z #13 20.94
2023-05-18T10:37:46Z #13 20.94 Hint: run the command with --verbose for more details.
2023-05-18T10:37:46Z #13 20.94
2023-05-18T10:37:46Z #13 ERROR: executor failed running [/bin/sh -c npm run build]: exit code: 1

本地构建成功日志 #

$ npm run build

> urbo@2.18.0-next build
> npx nx run urbo:build


> nx run urbo:build:production  [local cache]


Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.488489d057079c5a.js      | main          | 171.32 kB |                46.52 kB
polyfills.009d9a8ff651280a.js | polyfills     |  32.98 kB |                10.63 kB
styles.42447b8cfc638971.css   | styles        |   5.35 kB |                 1.15 kB
runtime.6cd79f8b99697142.js   | runtime       | 886 bytes |               514 bytes

                              | Initial Total | 210.52 kB |                58.80 kB

Build at: 2023-05-17T14:47:20.385Z - Hash: 3d6bc33d2b4daeec - Time: 160564ms

 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target build for project urbo (1s)
 
   Nx read the output from the cache instead of running the command for 1 out of 1 tasks.

解决办法 #

• 清理NX缓存，验证本地真实构建状态：本地构建依赖了NX缓存（日志显示[local cache]），先执行npx nx reset清理缓存，再本地重新执行npm run build，确认是否能复现Docker中的错误，排除缓存导致的本地“假成功”。
• 强制依赖一致性：
  • 本地删除node_modules和package-lock.json，执行npm install重新生成依赖文件，再复制到Docker构建环境，避免lock文件与实际依赖不匹配。
  • 修改Dockerfile中npm install为npm ci，确保完全按照package-lock.json安装依赖，避免版本差异：

    RUN npm ci
    

• 优化Dockerfile构建步骤：
  • 无需提前创建dist目录，构建过程会自动生成。
  • 如果项目有.npmrc配置文件，需要一并复制到容器中，否则可能导致依赖安装异常：

    COPY package.json package-lock.json .npmrc ./
    

• 获取详细错误栈：修改Dockerfile中的构建命令，添加--verbose参数，获取更详细的错误信息，定位具体出错的代码位置：

  RUN npm run build -- --verbose
  

• 排查文件权限问题：Docker容器默认用root用户执行，可能导致文件权限异常。添加用户权限配置：

  RUN chown -R node:node /usr/src/app
  USER node
  

  切换为node用户执行构建，避免权限问题。
• 检查Babel配置：错误来自Angular的Babel webpack loader，排查项目根目录是否有自定义.babelrc或babel.config.json，尝试删除自定义配置，使用Angular默认配置构建，确认是否为配置差异导致。

内容的提问来源于stack exchange，提问作者fgalan