Angular6如何根据环境变量动态加载不同LocaleId？

Hey there! Let's solve this Angular 6 locale loading challenge where we need to load different locales (en, nb, fr, he, etc.) based on environment variables. Since Angular 6 requires explicit import and registration of locale data (unlike Angular 5), here's a straightforward, maintainable approach:

Step 1: Configure Environment Files #

First, create environment files for each locale you need, each defining the locale code and its corresponding data. For example:

src/environments/environment.en.ts (English)

export const environment = {
  production: false,
  locale: 'en',
  localeData: require('@angular/common/locales/en').default
};

src/environments/environment.nb.ts (Norwegian)

export const environment = {
  production: false,
  locale: 'nb',
  localeData: require('@angular/common/locales/nb').default
};

Repeat this pattern for fr (French), he (Hebrew), and any other locales you need. For the default environment.ts, set your fallback locale (e.g., English).

Step 2: Update AppModule to Use Environment Config #

Modify your AppModule to import the current environment, register the locale data, and provide the LOCALE_ID from the environment:

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { environment } from '../environments/environment';

// Register the locale data fetched from the environment
registerLocaleData(environment.localeData);

@NgModule({
  declarations: [/* your components */],
  imports: [/* your modules */],
  providers: [
    { provide: LOCALE_ID, useValue: environment.locale }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Configure Angular Build Configurations #

Update your angular.json to add build configurations for each locale, so you can switch environments easily during build/serve:

Under architect > build > configurations, add entries for each locale:

"configurations": {
  "production": {
    // your existing production config
  },
  "en": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.en.ts"
      }
    ]
  },
  "nb": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.nb.ts"
      }
    ]
  },
  "fr": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.fr.ts"
      }
    ]
  },
  "he": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.he.ts"
      }
    ]
  }
}

Add corresponding configurations under architect > serve > configurations to test locales locally:

"configurations": {
  "production": {
    "browserTarget": "your-app:build:production"
  },
  "en": {
    "browserTarget": "your-app:build:en"
  },
  "nb": {
    "browserTarget": "your-app:build:nb"
  }
  // repeat for fr, he
}

Step 4: Build/Serve with the Desired Locale #

Now you can build or serve your app with a specific locale using these commands:

• Serve Norwegian: ng serve --configuration=nb
• Build French for production: ng build --configuration=fr --prod

Bonus: Runtime Locale Switching (If Needed) #

If you need to switch locales at runtime (instead of build time), use dynamic imports to load locale data on demand. Note that Angular's LOCALE_ID is resolved at app boot, so you'll need custom pipes/services to handle runtime changes:

import { Injectable } from '@angular/core';
import { registerLocaleData } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class LocaleService {
  async switchLocale(localeCode: string): Promise<void> {
    // Dynamically import the locale data
    const localeModule = await import(`@angular/common/locales/${localeCode}`);
    registerLocaleData(localeModule.default);
    
    // Use a service/pipe that references the current locale instead of relying solely on LOCALE_ID
  }
}

This approach keeps your code clean, adheres to Angular 6's locale requirements, and scales easily as you add more locales.

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