Repository navigation
ng xi18n isn't extracting localized messages when using $localize inside component ts files #16375
Description
🐞 Bug report / 🚀Feature request
Command (mark with an x)
- new
- build
- serve
- test
- e2e
- generate
- add
- update
- lint
- xi18n
- run
- config
- help
- version
- doc
Description
ng xi18n isn't extracting localized messages when using $localize inside component ts files.
🔬 Minimal Reproduction
- Create a Angular v9 Ivy enabled application.
- Add
@angular/localize(ng add @angular/localize) - Add a localized message in a component HTML template using
i18nattribute (<h2 i18n="@@works">This works</h2>). - Add a localized message in a component ts file using
$localize(this.message = $localize`:@@anId:a basic message`;) - Execute
ng xi18n. - Only the HTML template messages are being extracted.
Manually adding the non extracted translations and building the application works as expected but running ng xi18n again will erase them.
I've created a minimal GitHub repository with the reproduction of the issue : ivy-xi18n-issue
🌍 Your Environment
Angular CLI: 9.0.0-rc.5
Node: 10.17.0
OS: darwin x64
Angular: 9.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.5
@angular-devkit/build-angular 0.900.0-rc.5
@angular-devkit/build-optimizer 0.900.0-rc.5
@angular-devkit/build-webpack 0.900.0-rc.5
@angular-devkit/core 9.0.0-rc.5
@angular-devkit/schematics 9.0.0-rc.5
@ngtools/webpack 9.0.0-rc.5
@schematics/angular 9.0.0-rc.5
@schematics/update 0.900.0-rc.5
rxjs 6.5.3
typescript 3.6.4
webpack 4.41.2
Activity
clydin commentedon Dec 6, 2019
Using localize directly is not currently supported by the framework. However, it is being evaluated for future inclusion within the framework. But for 9.0, the attribute usage is the recommended and supported localization method.
josuerios commentedon Dec 6, 2019
Thanks for the info @clydin. Are there any plans for including it in a minor release of 9.x?
petebacondarwin commentedon Dec 6, 2019
The plan is to release a new message "extractor" for 9.1.0 - there is already a PR in the works here angular/angular#32912
In the meantime (for 9.0.0) you can assume that
$localizeis an internal implementation thingy.That being said, you can still use
$localizein your application code, it is just that you would have to work out the message id from the warnings that you get during translation. (Just don't tell anyone I said that)josuerios commentedon Dec 6, 2019
Good news! Thanks @petebacondarwin, I'll close this issue now.
mstawick commentedon Jan 2, 2020
If someone bumps into this issue, this might be helpful.
What I did is I've created a
TranslationComponent, in which I'll declare all the code translations, ex.:<span i18n>Some translation</span>Then when in code I write:
everything works "out of the box" because ID is the same.
angular-automatic-lock-bot commentedon Feb 2, 2020
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.