Angular实现默认英文与/fr路径法语的多语言路由切换

我来帮你搞定这个需求，其实你可以通过运行时多语言切换结合路由配置来实现，不需要构建多个独立版本，开发时更高效。咱们一步步来操作：

1. 安装本地化依赖（如果还没装） #

首先确保你已经安装了Angular官方的本地化工具，它能帮我们轻松处理多语言逻辑：

ng add @angular/localize

2. 调整angular.json配置 #

更新你的构建和开发服务器配置，让它支持多语言路径：

"projects": {
  "angular.io-example": {
    // ... 其他配置
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          // ... 原有options配置
          "i18nMissingTranslation": "error",
          "localize": ["en", "fr"] // 声明支持的语言列表
        },
        "configurations": {
          // ... 原有production配置
          "fr": {
            "aot": true,
            "baseHref": "/fr/",
            "i18nFile": "src/locale/messages.fr.xlf",
            "i18nFormat": "xlf",
            "i18nLocale": "fr",
            "i18nMissingTranslation": "error"
          }
        }
      },
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "angular.io-example:build"
        },
        "configurations": {
          "production": {
            "browserTarget": "angular.io-example:build:production"
          },
          "fr": {
            "browserTarget": "angular.io-example:build:fr"
          }
        }
      }
    }
  }
}

3. 配置路由与语言守卫 #

接下来需要通过路由前缀自动切换语言，我们用一个守卫来处理这个逻辑：

3.1 生成语言守卫 #

先创建一个守卫文件来检测路由路径并设置语言：

ng generate guard core/language

在language.guard.ts中添加核心逻辑：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Injectable({ providedIn: 'root' })
export class LanguageGuard implements CanActivate {
  constructor(private router: Router, private translate: TranslateService) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 从路由参数或路径前缀获取语言标识
    const lang = route.url[0]?.path || 'en';
    
    // 只允许支持的语言
    if (['en', 'fr'].includes(lang)) {
      this.translate.use(lang);
      // 如果是默认英文且路径带/en/，重定向到根路径
      if (lang === 'en' && route.url.length > 0) {
        this.router.navigateByUrl('/');
        return false;
      }
      return true;
    }

    // 未知语言重定向到英文首页
    this.router.navigateByUrl('/');
    return false;
  }
}

3.2 配置带语言前缀的路由 #

在app-routing.module.ts中设置路由规则，让不同前缀对应不同语言：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LanguageGuard } from './core/language.guard';

const routes: Routes = [
  // 默认英文路由
  {
    path: '',
    canActivate: [LanguageGuard],
    children: [
      // 这里添加你的业务路由，比如首页、列表页等
      { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }
    ]
  },
  // 法语路由
  {
    path: 'fr',
    canActivate: [LanguageGuard],
    children: [
      // 复用相同的业务路由组件
      { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }
    ]
  },
  // 404重定向到首页
  { path: '**', redirectTo: '' }
];

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

4. 配置翻译文件与翻译模块 #

我们用ngx-translate来管理翻译内容，先安装依赖：

npm install @ngx-translate/core @ngx-translate/http-loader

然后创建翻译文件：

• 在assets/i18n目录下创建en.json（英文）：

{
  "welcome": "Welcome to our App!",
  "home": "Home Page"
}

• 创建fr.json（法语）：

{
  "welcome": "Bienvenue dans notre application !",
  "home": "Page d'accueil"
}

最后在app.module.ts中配置翻译模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 加载翻译文件的工厂函数
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      defaultLanguage: 'en'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 在组件中使用翻译 #

在模板中用translate管道调用翻译内容：

<h1>{{ 'welcome' | translate }}</h1>
<a routerLink="/">{{ 'home' | translate }}</a>

6. 启动验证 #

现在直接启动开发服务器：

ng serve

访问localhost:4200会显示英文版本，访问localhost:4200/fr会自动切换为法语版本，完全符合你的需求！

如果你需要生产环境构建独立版本，可以调整angular.json的build配置，让每个语言输出到单独目录：

"configurations": {
  "production-en": {
    "extends": "production",
    "outputPath": "dist/en",
    "baseHref": "/"
  },
  "production-fr": {
    "extends": "production",
    "outputPath": "dist/fr",
    "baseHref": "/fr/",
    "i18nFile": "src/locale/messages.fr.xlf",
    "i18nFormat": "xlf",
    "i18nLocale": "fr"
  }
}

构建时执行：

ng build --configuration=production-en
ng build --configuration=production-fr

部署时将dist/en放到服务器根目录，dist/fr放到/fr/目录即可。

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