Angular部署Nginx无法加载指定JS文件问题求助

问题描述 #

通过Docker容器部署Angular应用后，Nginx服务器无法正确加载两个JavaScript文件：main-es2015.f342ce8f66110b6402ac.js、runtime-es2015.5798a1d137c7e59283fe.js，请求这两个文件时Nginx返回的是index.html。但同目录下的polyfills-es2015.2a005ad49cdc9f23d0cf.js、scripts.9be41abd9653638cc717.js可正常加载。

当前Nginx配置：

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;

    try_files $uri /index.html;

    add_header 'Access-Control-Allow-Origin' '*';
}

index.html基础路径配置片段：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Admin Portal</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <ngx-app>Loading...</ngx-app>

已确认Docker容器内/usr/share/nginx/html目录下所有JS文件均存在。

排查与解决方法 #

• 检查文件名大小写匹配：Linux系统（Docker容器通常基于Linux）区分文件名大小写，确认浏览器请求的文件名和容器内实际文件名的大小写完全一致，若存在大小写差异会触发try_files规则返回index.html。
• 调整Nginx的try_files规则：修改规则明确优先匹配静态文件，避免误判文件不存在：

  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
  
      try_files $uri $uri/ /index.html;
  
      add_header 'Access-Control-Allow-Origin' '*';
  }
  

• 验证Angular构建配置：执行ng build --prod（对应环境的构建命令）时，检查终端输出的文件列表，确认main-es2015和runtime-es2015文件正常生成；查看构建后完整的index.html，确认这两个JS文件的引用路径无多余前缀。
• 检查文件权限：进入Docker容器查看文件权限，确保文件具备可读权限（通常644即可）：

  docker exec -it <容器ID> ls -l /usr/share/nginx/html/main-es2015*.js /usr/share/nginx/html/runtime-es2015*.js
  

  若权限不足，执行：

  docker exec -it <容器ID> chmod 644 /usr/share/nginx/html/main-es2015*.js /usr/share/nginx/html/runtime-es2015*.js
  

• 清除浏览器缓存：强制刷新页面（Ctrl+F5）或清除浏览器缓存，确认请求的是最新文件路径。

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