Windows 10下Docker搭建Angular 5开发环境遇tsconfig.app.json不存在问题

我来帮你排查这个本地ng serve正常但Docker容器里报错的问题——这种场景下，大概率是文件同步不完整、Docker上下文路径错误，或者版本兼容性导致的，结合你用最新Angular CLI创建项目的背景，给你几个针对性的解决步骤：

1. 检查Dockerfile的文件拷贝逻辑与工作目录 #

很多时候问题出在Dockerfile的路径配置上。给你一个适配Angular 5的标准Dockerfile参考，对比看看你的配置有没有问题：

# Angular 5适配Node.js 12.x版本，太高版本会有兼容性问题
FROM node:12-alpine

# 设置容器内的工作目录，后续命令都基于这个路径执行
WORKDIR /app

# 优先拷贝package.json和package-lock.json，利用Docker缓存优化构建速度
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 最后拷贝整个项目的所有文件到容器工作目录
COPY . .

# 启动Angular开发服务器，--host 0.0.0.0允许外部访问
CMD ["ng", "serve", "--host", "0.0.0.0"]

如果你的Dockerfile里没有设置WORKDIR，或者拷贝文件时用了错误的相对路径（比如COPY ./docker-test .而不是COPY . .），就会导致项目文件没有被放到容器的正确位置，自然找不到tsconfig.app.json。

2. 确认Docker构建的上下文路径 #

执行docker build命令时，一定要在项目根目录（也就是包含tsconfig.app.json、package.json的那个docker-test文件夹）下运行。比如：

# 先切换到项目根目录
cd C:\path\to\docker-test
# 再执行构建命令
docker build -t angular-docker-test .

如果在父目录执行构建，Docker的上下文里不会包含docker-test文件夹里的内容，拷贝到容器里的文件结构就会出错。

3. 检查.dockerignore或.gitignore是否误排除了关键文件 #

自动生成的.dockerignore有时候会包含一些过于宽泛的规则，比如*.json，如果不小心把tsconfig.app.json也排除了，容器里就不会有这个文件。打开你的.dockerignore文件，看看有没有类似下面的规则，如果有就删掉：

# 错误示例，会排除所有json文件
*.json

正确的.dockerignore应该只排除不需要的文件，比如：

node_modules/
dist/
.git/

4. 验证容器内的文件结构 #

如果前面几步都没问题，可以启动一个临时容器，手动检查文件是否正确拷贝：

# 启动临时容器，进入交互式shell
docker run --rm -it angular-docker-test sh
# 在容器内查看工作目录的文件
ls -la /app

如果看不到tsconfig.app.json，说明文件拷贝环节确实出了问题，回到前两步重新检查路径和拷贝规则。

5. 适配Angular 5的版本兼容性 #

Angular 5是比较老的版本，和最新的Node.js版本不兼容，所以一定要在Docker里使用Node.js 12.x版本（官方推荐的兼容版本是8.x-12.x）。如果用了Node.js 14+版本，不仅可能出现文件找不到的错误，还会有依赖安装失败、ng命令执行异常等问题。

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