localization - Angular 18 localize text in environment file - Stack Overflow

admin管理员组

文章数量:1318564

I am using @angular/localize to localize my angular application. How can I localize text from different environment files like environment.ts, environment.development.ts, environment.qa.ts?

for prod

export const environment = {
  loginHelpText: $localize`Prod login message`,
};

For dev

export const environment = {
  loginHelpText: $localize`Dev login message`,
};

For QA

export const environment = {
  loginHelpText: $localize`QA login message`,
};

When run ng extract-i18n --output-path src/locale --format json it extract text from environment.ts only.

I am using @angular/localize to localize my angular application. How can I localize text from different environment files like environment.ts, environment.development.ts, environment.qa.ts?

for prod

export const environment = {
  loginHelpText: $localize`Prod login message`,
};

For dev

export const environment = {
  loginHelpText: $localize`Dev login message`,
};

For QA

export const environment = {
  loginHelpText: $localize`QA login message`,
};

When run ng extract-i18n --output-path src/locale --format json it extract text from environment.ts only.

• angular
• localization
• angular-i18n
• angular-localize

Share Improve this question Follow edited Jan 21 at 13:11 JSON Derulo 17.9k1111 gold badges5757 silver badges7575 bronze badges asked Jan 21 at 10:34 Divesh DobalDivesh Dobal 3133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This is expected, the i18n is extracted just for the default configuration. What you should do instead is to move the i18n logic out of the environment files into your application, and add a property to the environment object so the current environment can be identified in the application, for example name:

export const environment = {
  name: 'production',
};

And in your application, add a simple switch case / if else to generate the right message:

import { environment } from 'path-to/environment';

export class YourComponent {
  loginHelpText = this.getLoginHelpText();

  private getLoginHelpText(): string {
    switch (environment.name) {
      case 'production':
        return $localize`Prod login message`;
      case 'qa':
        return $localize`QA login message`;
      case 'dev':
      default:
        return $localize`Dev login message`;
    }
  }
}

本文标签： localizationAngular 18 localize text in environment fileStack Overflow