Angular嵌套路由刷新空白页问题求助（Nginx部署）

问题原因 #

刷新example.com/configuration/devices时，浏览器请求懒加载模块的脚本文件，但Nginx无法匹配到对应文件，返回了index.html（MIME类型为text/html），而浏览器期望的是JavaScript模块（application/javascript），因此触发严格MIME类型检查报错。

其他路由正常的原因：/classroom等路由的资源请求路径不会受路由层级影响；/configuration重定向到/configuration/devices是前端路由跳转，不会触发服务器请求，因此无异常。

解决方法 #

1. 确保Angular构建时设置正确的base href #

构建项目时必须指定base-href为根路径，避免资源使用相对路径导致路由层级错误：

# 生产环境构建
ng build --prod --base-href /

# 开发环境构建
ng build --base-href /

此配置会让所有静态资源（包括懒加载模块脚本）以绝对路径/开头请求，不会因当前路由路径（如/configuration/devices）变成错误的相对路径。

2. 优化Nginx配置，区分静态资源与前端路由 #

修改Nginx的server配置，优先处理静态资源请求，避免.js、.css等文件被重定向到index.html：

server {
    listen       8080;
    server_name  192.168.5.100;

    # 优先匹配静态资源，直接返回对应文件
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        root   html;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 处理前端路由，非静态资源请求返回index.html
    location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page  404              index.html;
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

3. 强制设置JavaScript的MIME类型（可选） #

若Nginx默认的mime.types配置有误，可在http块手动添加MIME类型映射：

http {
    include       mime.types;
    # 强制指定.js文件的MIME类型
    types {
        application/javascript js;
    }
    default_type  application/octet-stream;

    # 其他原有配置...
}

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