Angular：使用SSR时如何在开发环境中设置资源的baseHref

问题描述 #

生产环境执行ng build --base-href /app/后，资源可正常在/app/assets/路径访问，但开发环境运行ng run project:serve-ssr时，资源仍处于/assets路径，无法通过/app/assets/访问。已尝试过以下配置均无效：

• 设置architect.build.options.baseHref
• 设置architect.serve.options.servePath
• 设置architect.server.options.servePath（配置不被允许）
• 设置architect.serve-ssr.options.servePath（配置不被允许）
• 在AppModule中提供DI令牌APP_BASE_HREF

解决方案 #

1. 同时配置Build和Server目标的资源映射 #

serve-ssr依赖build和server两个核心目标，需分别配置路径映射：

步骤1：配置Build目标的baseHref

修改angular.json中architect.build.configurations.development（对应开发环境配置），设置资源前缀路径：

"build": {
  "options": {
    // 其他默认配置
  },
  "configurations": {
    "development": {
      "baseHref": "/app/",
      // 其他开发环境配置
    }
  }
}

此配置会让构建后的资源路径自动添加/app/前缀，生成到dist/project/browser/app/assets/目录下。

步骤2：配置Server目标的静态资源映射

若server目标不支持直接设置servePath，通过staticAssets将浏览器构建产物挂载到/app路径：

"server": {
  "options": {
    "outputPath": "dist/project/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json",
    "staticAssets": [
      {
        "path": "dist/project/browser",
        "servePath": "/app"
      }
    ]
  },
  "configurations": {
    "development": {
      // 其他开发环境配置
    }
  }
}

配置后SSR服务器会将dist/project/browser下的资源映射到/app路径，访问/app/assets/即可获取对应资源。

2. 为ServerModule补充APP_BASE_HREF配置 #

仅在AppModule中配置APP_BASE_HREF无法覆盖SSR服务器端渲染逻辑，需在AppServerModule中同步配置：

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { APP_BASE_HREF } from '@angular/common';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/app/' }
  ]
})
export class AppServerModule {}

确保服务器端渲染时也能正确识别base href路径。

3. 命令行临时配置（快速验证） #

若不想修改配置文件，可直接通过命令行传递参数启动：

ng run project:serve-ssr --build-options="--base-href /app/" --server-options="--staticAssets [{\"path\":\"dist/project/browser\",\"servePath\":\"/app\"}]"

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