Angular前端runtime.js遇Unexpected Token错误，页面白屏求助

这个错误的核心是：浏览器请求runtime.ec2944dd8b20ec099bf3.js时，服务器返回的不是正常JS文件，而是HTML内容（里面的<被转义成了<）。结合你本地运行正常、重建容器无效的情况，从可能的近期变更和排查方向梳理如下：

可能的近期变更 #

• 服务器/容器内的反向代理（如Nginx）配置被修改：比如错误添加了强制把所有请求导向index.html的规则，导致JS资源请求被返回首页HTML
• Angular构建命令的--base-href参数被修改：如果部署路径不是根目录，错误的base路径会让浏览器请求错误的JS文件路径，触发404后被重定向到HTML
• CI/CD构建流程变更：比如构建产物没正确复制到Docker镜像的静态文件目录，或者构建时用了错误的环境配置（比如用开发环境代替生产环境）
• 容器内静态资源服务的根目录配置被修改：比如Nginx的root路径指向错误，导致找不到JS文件，返回404页面的HTML

具体排查步骤 #

• 直接在浏览器地址栏输入runtime.ec2944dd8b20ec099bf3.js的完整URL，查看返回内容：如果是首页HTML或者404页面，实锤是路由/路径配置问题
• 进入Docker容器，检查静态文件目录（比如/usr/share/nginx/html）下是否存在这个runtime.js文件，打开文件看内容是不是正常的JS代码，而非HTML
• 核对Angular的构建命令：生产环境构建应该用ng build --prod（Angular 14及以前）或ng build --configuration production，如果部署在子路径，需要加--base-href /your-sub-path/
• 检查容器内的Nginx配置文件：看location规则是否正确，静态资源的规则应该优先匹配.js、.css等文件，再把其他请求导向index.html（SPA路由规则），避免把JS请求也重定向
• 对比之前正常运行的Docker镜像/构建产物，看文件结构、文件名哈希、文件内容是否有差异，确认是不是构建过程出了问题
• 检查容器的启动命令或挂载配置：确认构建产物目录是否被正确挂载到容器的静态服务目录下，没有出现路径挂载错误

内容的提问来源于stack exchange，提问作者po.pe