Nginx部署多个Angular应用刷新子路由出现Unexpected token '<'报错

你遇到的Uncaught SyntaxError: Unexpected token '<'错误本质是：嵌套路由刷新时，Nginx错误返回了根路径主站的index.html内容，浏览器将HTML代码当作JS/CSS资源解析导致报错，具体由两个配置错误共同导致：

• Nginx中/dashboard路径的try_files规则配置错误，路由回退时指向了根路径的主站入口文件
• Angular子应用打包时未指定正确的base-href，导致静态资源请求路径匹配错误

第一步：修改Angular dashboard项目打包配置 #

打包dashboard应用时指定base路径为/dashboard/，确保所有静态资源请求都指向/dashboard前缀的路径：

• 临时打包命令：执行ng build --base-href /dashboard/
• 永久配置：打开项目angular.json，在对应项目的architect.build.options节点下添加配置：

"baseHref": "/dashboard/"

重新打包后将产物上传到/usr/share/nginx/html/dashboard目录。

第二步：修正Nginx配置 #

替换原配置中的/dashboard相关location块，完整修改后的配置如下：

server {
    listen       80;
    listen       [::]:80;
    server_name  _;
    # 主站配置
    root /usr/share/nginx/html/home;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;

    sendfile on;
    rewrite_log on;
    include  /etc/nginx/mime.types;
    gzip on;

    # 主站静态资源缓存
    location ~ ^/(assets|bower_components|scripts|styles|views) {
        expires     31d;
        add_header  Cache-Control public;
    }

    # dashboard子站配置
    location ^~ /dashboard {
        alias /usr/share/nginx/html/dashboard;
        index index.html;
        try_files $uri $uri/ @dashboard;
        
        # 子站静态资源缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 31d;
            add_header Cache-Control public;
        }
    }

    # dashboard子站路由回退规则
    location @dashboard {
        rewrite ^/dashboard/(.*)$ /dashboard/index.html last;
    }

    include /etc/nginx/default.d/*.conf;

    error_page 404 /404.html;
    location = /404.html {
    }

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

第三步：生效配置 #

执行命令测试Nginx配置合法性：
nginx -t
返回success后执行重载配置生效：
nginx -s reload

清理浏览器缓存后访问dashboard的嵌套路由，刷新页面即可正常加载，不再出现语法报错。

内容的提问来源于stack exchange，提问作者Alexis San Martin