Angular13 i18n路由：根路径默认用en-US且URL不带语言标识

核心逻辑是通过Angular路由的自定义matcher实现语言前缀识别，根路径无任何前缀时默认使用en-US，完全保留原有无语言前缀的链接访问能力，不会破坏用户已保存的旧地址。

1. 前置配置 #

先在项目公共常量文件（比如src/app/constants/language.const.ts）中定义支持的语言列表和默认语言：

export const SUPPORTED_LANGUAGES = ['en-US', 'fr-FR', 'es-CO'] as const;
export const DEFAULT_LANGUAGE = 'en-US';

如果项目用的是Angular官方构建时i18n方案，建议先切换为@ngx-translate/core做运行时语言切换——官方i18n多产物部署依赖baseHref前缀，无法实现根路径默认英文的无破坏兼容。

2. 根路由配置 #

在AppRoutingModule中实现自定义路由匹配逻辑，不需要修改原有业务路由的定义：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, UrlSegment } from '@angular/router';
import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from './constants/language.const';
// 引入项目自身的业务组件、i18n服务
import { HomeComponent } from './pages/home/home.component';
// import { TranslateService } from '@ngx-translate/core';

// 自定义语言前缀匹配器
function langRouteMatcher(url: UrlSegment[]) {
  // 场景1：访问根路径，无任何路径段，直接命中默认语言
  if (url.length === 0) {
    return {
      consumed: [],
      posParams: { lang: new UrlSegment(DEFAULT_LANGUAGE, {}) }
    };
  }

  const firstPathSegment = url[0].path;
  // 场景2：第一个路径段是已支持的语言前缀，消费该前缀后匹配后续业务路由
  if ((SUPPORTED_LANGUAGES as readonly string[]).includes(firstPathSegment)) {
    return {
      consumed: url.slice(0, 1),
      posParams: { lang: new UrlSegment(firstPathSegment, {}) }
    };
  }

  // 场景3：第一个路径段不是语言前缀（属于旧版业务路径），走默认语言，不消费路径段
  return {
    consumed: [],
    posParams: { lang: new UrlSegment(DEFAULT_LANGUAGE, {}) }
  };
}

const routes: Routes = [
  {
    matcher: langRouteMatcher,
    children: [
      // 原有业务路由全部放在这里，不需要做任何修改
      { path: '', component: HomeComponent, pathMatch: 'full' },
      // 其他业务路由、懒加载路由正常写即可
      // { path: 'user-center', loadChildren: () => import('./pages/user/user.module').then(m => m.UserModule) }
    ],
    resolve: {
      lang: (route) => {
        const currentLang = route.params.get('lang');
        // 在这里调用项目的i18n服务切换语言即可，比如ngx-translate的调用示例：
        // inject(TranslateService).use(currentLang);
        return currentLang;
      }
    }
  },
  // 兜底404路由放在最后
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      // 原有路由配置参数保持不变即可
      initialNavigation: 'enabledBlocking'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. 匹配效果验证 #

配置完成后即可完全满足需求：

• 访问application.com/：自动使用en-US英文翻译，和旧版行为完全一致，用户保存的旧链接无任何访问问题
• 访问application.com/fr-FR：消费fr-FR前缀，使用fr-FR法语翻译
• 访问application.com/es-CO：消费es-CO前缀，使用es-CO西语翻译
• 访问旧版业务路径比如application.com/about：自动使用en-US英文翻译，不会出现404

可选优化 #

可以在匹配逻辑中补充短前缀重定向能力，比如用户输入/fr时自动跳转到/fr-FR，输入/es时自动跳转到/es-CO，进一步提升访问容错性。

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