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

1 Answer 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`;
    }
  }
}