ng xi18n isn't extracting localized messages when using $localize inside component ts files

[josuerios]

🐞 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

1. Create a Angular v9 Ivy enabled application.
2. Add @angular/localize (ng add @angular/localize)
3. Add a localized message in a component HTML template using i18n attribute (<h2 i18n="@@works">This works</h2>).
4. Add a localized message in a component ts file using $localize (this.message = $localize`:@@anId:a basic message`;)
5. Execute ng xi18n.
6. 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

[clydin]

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]

Thanks for the info @clydin. Are there any plans for including it in a minor release of 9.x?

[petebacondarwin]

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 $localize is an internal implementation thingy.

That being said, you can still use $localize in 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]

Good news! Thanks @petebacondarwin, I'll close this issue now.

[mstawick]

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:

$localize`Some translation`

everything works "out of the box" because ID is the same.

[angular-automatic-lock-bot]

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.}