Docker部署Angular应用：无法通过浏览器URL获取CSS文件

这个问题和Dockerfile无关，核心是Angular开发服务器的静态资源映射规则导致的——Angular的ng serve默认会把未匹配到静态资源的请求重定向到index.html（单页应用路由策略），而JS文件能正常访问是因为它们是构建输出的产物，被开发服务器正确识别为静态资源，你的CSS文件则没有被纳入静态资源列表。

解决步骤： #

1. 检查CSS文件的位置与Angular静态资源配置 #

打开项目根目录的angular.json，找到对应项目的build -> options -> assets数组：

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets"
            // 这里需要添加你的CSS文件路径
          ]
        }
      }
    }
  }
}

• 如果style.css在项目根目录，添加"./style.css"到数组中；
• 如果style.css在src目录下，添加"src/style.css"；
• 如果在src/assets/css目录，添加"src/assets/css"或具体文件路径。

修改后重启开发服务器，Angular会将这些路径下的文件当作静态资源提供，不会再重定向到仪表盘。

2. 验证index.html中的CSS引用路径 #

确保index.html里的CSS引用路径和静态资源配置匹配：

<!-- 如果style.css在assets目录 -->
<link rel="stylesheet" href="assets/style.css">
<!-- 如果直接配置了根目录的style.css -->
<link rel="stylesheet" href="style.css">

3. 确认容器内文件是否存在（可选） #

如果本地运行正常但Docker里还是有问题，进入容器检查文件是否被正确复制：

docker exec -it [你的容器ID/名称] ls /app

确认style.css存在，若不存在，检查本地项目中是否有这个文件，或调整Dockerfile的COPY指令（当前COPY . ./应该能复制所有文件，大概率不是这个问题）。

4. 检查start-dev命令参数 #

查看package.json的scripts，确认start-dev是否带有异常参数：

"scripts": {
  "start-dev": "ng serve" // 正常情况，若有--base-href等参数，确保路径正确
}

如果--base-href设置了非根路径，需要同步调整CSS的引用路径。

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