Docker构建Angular项目时npm ci报错：Cannot read property '@angular/animations' of undefined

问题根源分析 #

1. Node版本不兼容：本地使用Node.js 18.14.2，但Docker基础镜像用的是Node.js 14.18-alpine，npm ci依赖package-lock.json与Node版本的兼容性，跨版本执行可能导致依赖解析失败。
2. Dockerfile步骤错误：最后一步COPY --chown=node:node . .会完全覆盖之前安装好的node_modules目录，导致后续构建时依赖缺失。
3. 权限冲突：npm ci以root用户执行，生成的文件权限与后续切换的node用户不匹配，可能引发依赖读取错误。

具体解决方案 #

1. 统一Node.js版本 #

将Docker基础镜像替换为与本地一致的Node.js版本：

FROM docker-images.artifactory.dummydomain.com/db/node:18.14.2-alpine as build

2. 修复Dockerfile步骤与权限 #

调整Dockerfile的执行顺序，利用缓存并避免权限问题：

FROM docker-images.artifactory.dummydomain.com/db/node:18.14.2-alpine as build

WORKDIR /usr/src/app

# 先复制package文件，缓存依赖安装层
COPY package*.json ./

# 切换到node用户执行所有操作，避免权限冲突
USER node

# 安装依赖
RUN npm ci 

# 复制项目其他文件（不会覆盖已安装的node_modules）
COPY --chown=node:node . .

# 安装Angular CLI并执行构建
RUN npm install -g @angular/cli@15.2.8
RUN ng build --configuration=test

3. 重新生成package-lock.json（若版本统一后仍报错） #

在本地环境执行以下命令更新lock文件，再提交到代码库：

rm -rf node_modules package-lock.json
npm install

4. 排查依赖版本冲突 #

执行以下命令检查@angular/animations的依赖树，确认是否存在版本冲突：

npm ls @angular/animations

若发现冲突，可通过npm dedupe或调整依赖版本号解决。

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