Localize an Angular 11 library

Question

The Angular i18n docs are clear about localizing an app, but it does not say anything about libraries.

ng add @angular/localize does not modify angular.json, and ng extract-i18n fails with the following errors :

Missing extract-i18n in angular.json

An unhandled exception occurred: No projects support the 'extract-i18n' target.

Adding extract-i18n target in angular.json

Data path "" should have required property 'browserTarget'.

How do I generate a messages.xlf file for my library ?

ojathelonius · Accepted Answer · 2021-03-31 14:22:12Z

1

As of March 2021, this is not yet supported.

There is a workaround however :

First install @angular/localize like you would for a regular app :

ng add @angular/localize

In package.json, add the following script to scan the built files for localized strings :

"i18n": "localize-extract -r . -s \"dist/efp-widgets/fesm2015/*.js\" -f xlf -o messages.xlf"

Note that localize-extract comes from @angular/localize;

If using $localize in TypeScript, don't forget to register @angular/localize/init in public-api.ts :

import '@angular/localize/init'

Then add the i18n script to your main build script in package.json :

"build": "ng build && npm run i18n"

answered Mar 31, 2021 at 14:22

ojathelonius

91412 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lauri Elias Over a year ago

Careful adding import '@angular/localize/init' elsewhere in the codebase (to get rid of IDE warnings, for example). In my case it resulted in $localize translations not being loaded without any indication as to what went wrong.

Collectives™ on Stack Overflow

Localize an Angular 11 library

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related