Angular i18n编译时翻译：如何依据angular.json动态设置LOCALE_ID？

方法一：利用Angular Localize内置API自动获取Locale #

这种方法无需额外维护配置文件，直接借助Angular编译时注入的Locale信息：

• 移除App.module.ts中固定的LOCALE_ID配置，删掉{ provide: LOCALE_ID, useValue: "fr" }这一行
• 在src/polyfills.ts中添加Localize初始化代码：

  import '@angular/localize/init';
  

• 修改App.module.ts的providers配置，用工厂函数动态获取Locale：

  import { LOCALE_ID } from '@angular/core';
  import { getLocaleId } from '@angular/localize';
  
  @NgModule({
    // 其他模块配置项
    providers: [
      { provide: LOCALE_ID, useFactory: getLocaleId }
    ]
  })
  export class AppModule { }
  

  编译对应语言包时，getLocaleId()会自动返回当前构建的Locale值（如en、ar），无需手动维护。

方法二：通过环境文件绑定Locale（适合需额外语言配置的场景） #

如果需要在环境中维护更多语言相关参数，可采用此方式：

1. 创建多语言环境文件
   在src/environments/目录下创建对应语言的环境文件：

   • environment.fr.ts：

     export const environment = {
       localeId: 'fr'
     };
     

   • environment.en.ts：

     export const environment = {
       localeId: 'en'
     };
     

   • environment.ar.ts：

     export const environment = {
       localeId: 'ar'
     };
     

   确保默认的environment.ts也包含localeId字段。

2. 修改angular.json构建配置
   在projects -> [你的项目名] -> architect -> build -> configurations下，为每个Locale添加专属配置：

   "configurations": {
     "production": {
       // 已有生产环境配置
     },
     "fr": {
       "localize": ["fr"],
       "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.fr.ts"
         }
       ]
     },
     "en": {
       "localize": ["en"],
       "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.en.ts"
         }
       ]
     },
     "ar": {
       "localize": ["ar"],
       "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.ar.ts"
         }
       ]
     }
   }
   

3. 在App.module.ts中绑定LOCALE_ID

   import { LOCALE_ID } from '@angular/core';
   import { environment } from '../environments/environment';
   
   @NgModule({
     // 其他模块配置项
     providers: [
       { provide: LOCALE_ID, useFactory: () => environment.localeId }
     ]
   })
   export class AppModule { }
   

验证方式 #

运行对应语言的构建命令，比如ng build --configuration=en，构建后的包中日期选择器等依赖LOCALE_ID的组件会自动使用目标语言的格式。

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