Angular 17 Universal：deployUrl移除后的非根路径部署替代方案问询

不少开发者都遇到过这个问题，除了Nginx重写，还有以下几种可行的解决方式：

• 使用 baseHref 配置
  Angular 17 移除 deployUrl 后，可通过构建参数或配置文件指定 baseHref 来替代。比如构建时执行：

  ng build --base-href "/my/super/awesome/app/"
  

  也可以在 angular.json 的项目 build 配置中添加 baseHref: "/my/super/awesome/app/"。配置后，Angular会自动为所有CSS、JS及assets资源的请求路径加上前缀，SSR渲染时也会生成正确的资源链接，注意路径结尾要带斜杠。

• 调整Express服务器的资源映射
  如果使用Angular Universal默认的Express服务器，可在 server.ts 中添加中间件，手动映射非根路径的资源请求：

  import { join } from 'path';
  import { Express } from 'express';
  
  export function app(): Express {
    const server = express();
    const distFolder = join(process.cwd(), 'dist/your-app-name/browser');
    const appBasePath = '/my/super/awesome/app/';
  
    // 将带前缀的资源请求映射到静态文件目录
    server.use(appBasePath, express.static(distFolder, {
      maxAge: '1y',
      index: false
    }));
  
    // 原有SSR路由处理逻辑...
    return server;
  }
  

  这样当请求 /my/super/awesome/app/assets/logo.png 时，服务器会从 dist/your-app-name/browser/assets/logo.png 读取文件返回。

• Nginx重写（传统方案）
  若偏好服务器层面解决，Nginx重写依然有效，示例配置：

  location /my/super/awesome/app/ {
    alias /usr/share/nginx/html/your-app-dist/browser/;
    try_files $uri $uri/ /my/super/awesome/app/index.html;
  }
  

  该配置会将所有带指定前缀的请求转发到对应的静态资源目录，同时处理SPA路由的 fallback。

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