部署在Nginx中的Angular 4应用无法加载文件问题求助

这些错误一看就知道是请求的JS/CSS资源返回的不是预期的文件内容，而是HTML页面（大概率是Nginx的404页面），浏览器解析HTML开头的<符号时自然就会报语法错误，webpackJsonp is not defined也是因为依赖的JS文件没加载成功导致的。下面是一步步的排查和解决方法：

1. 先确认Angular打包的base href设置是否正确 #

Angular的单页应用依赖<base href>来确定静态资源的加载路径：

• 如果你的应用部署在Nginx的根目录（比如http://your-domain.com/），打包时直接用ng build --prod即可，默认的<base href="/">是正确的。
• 如果部署在子路径（比如http://your-domain.com/my-app/），打包时必须指定base href：

  ng build --prod --base-href /my-app/
  

  或者手动修改dist/index.html里的<base href>标签为对应路径。

2. 检查Nginx的配置（最关键的一步） #

Nginx的配置错误是这类问题的重灾区，核心要保证两点：静态资源能被正确找到，同时前端路由请求能转发到index.html。

把你的Nginx server配置改成这样：

server {
    listen 80;
    server_name your-domain.com; # 换成你的域名或IP

    # 指向Angular打包后的dist目录路径
    root /usr/share/nginx/html/your-angular-dist;
    index index.html index.htm;

    location / {
        # 先尝试加载请求的文件/目录，找不到就转发到index.html
        try_files $uri $uri/ /index.html;
    }

    # 可选：给静态资源设置缓存，提升加载速度
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

• root必须准确指向你存放Angular打包文件的目录，比如你把dist里的文件都放到了/usr/share/nginx/html/angular-app，那这里就写这个路径。
• try_files是核心：当请求inline.bundle.js时，Nginx会先在root目录下找这个文件，找到就返回；如果是前端路由（比如/dashboard），找不到对应的文件，就转发到index.html，让Angular自己处理路由。

3. 验证文件权限 #

确保Nginx的运行用户（通常是www-data）有权限读取你的dist目录及里面的文件，否则会返回403错误，最终也可能被重定向到HTML页面。执行下面的命令设置权限：

chown -R www-data:www-data /path/to/your/angular/dist

4. 用浏览器开发者工具排查 #

打开浏览器的「开发者工具」→「Network」标签，刷新页面后看那些bundle.js、css文件的请求：

• 如果状态码是404：说明资源路径不对，回去检查base href和Nginx的root路径。
• 如果状态码是200，但响应内容是HTML：说明Nginx把静态资源请求也转发到了index.html，检查try_files配置是否正确。

按照这几步来，基本就能解决你的问题了。

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