Angular如何配置支持多个baseHref以适配不同地区前缀路由需求

要实现Angular支持多个动态baseHref，不需要修改HTML的base标签，通过Angular内置的APP_BASE_HREF注入令牌动态赋值即可，完整实现步骤如下：

在根模块（一般为app.module.ts）中声明合法的区域前缀列表，通过工厂函数动态从当前URL中提取匹配的前缀作为baseHref注入：

import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 注册所有合法的区域baseHref前缀
const VALID_REGION_BASE_HREF = ['/usa', '/uk', '/jp', '/kr'];

export function dynamicBaseHrefFactory(): string {
  const currentPath = window.location.pathname;
  // 匹配当前路径开头的合法区域前缀
  const matchedBase = VALID_REGION_BASE_HREF.find(prefix => currentPath.startsWith(prefix));
  // 没有匹配到合法前缀时回退到根路径，也可以按业务需求跳转到默认区域
  return matchedBase || '/';
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    {
      provide: APP_BASE_HREF,
      useFactory: dynamicBaseHrefFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

路由规则不需要额外添加区域前缀，APP_BASE_HREF会自动将baseHref部分从路由匹配路径中剥离：

• 当访问/uk/en/home时，baseHref被识别为/uk，路由实际匹配的路径为en/home
• 当访问/usa/en/home时，baseHref被识别为/usa，路由实际匹配的路径同样为en/home

路由配置示例：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';

const routes: Routes = [
  { path: 'en/home', component: HomeComponent },
  { path: 'en/product', component: ProductComponent },
  { path: '', redirectTo: 'en/home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 路由跳转时直接使用routerLink指令或者Router.navigate方法即可，不需要手动拼接区域前缀，Angular会自动拼接当前生效的baseHref，比如routerLink=['/en/product']在/uk场景下会自动生成跳转路径/uk/en/product
• 生产构建时不需要添加--base-href参数，否则会覆盖动态注入的APP_BASE_HREF值
• 如果使用SSR服务端渲染，需要将工厂函数中的window.location.pathname替换为从服务端请求对象中获取的访问路径，避免服务端运行时报错
• 静态资源如果存放在根目录，直接使用绝对路径引用即可，不需要适配baseHref

内容的提问来源于stack exchange，提问作者F.Rachidi