Can't use $localize in ts component

🐞 bug report

Affected Package

The issue is caused by package @angular/localize

Is this a regression?

I don’t know

Description

I’m using $localize method in my .ts component:

text = $localize`:@@loginError:`;

I have this key in my xlf file:

      <trans-unit id="loginError">
        <source>test stub</source>
        <target>Invalid login or password :(</target>
      </trans-unit>

But my message is not translated when i serve app

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.0-rc.10
Node: 13.6.0
OS: darwin x64

Angular: 9.0.0-rc.11
... animations, 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.10
@angular-devkit/build-angular     0.900.0-rc.10
@angular-devkit/build-optimizer   0.900.0-rc.10
@angular-devkit/build-webpack     0.900.0-rc.10
@angular-devkit/core              9.0.0-rc.10
@angular-devkit/schematics        9.0.0-rc.10
@angular/cdk                      8.2.0
@angular/cli                      9.0.0-rc.10
@angular/material                 8.2.0
@ngtools/webpack                  9.0.0-rc.10
@schematics/angular               9.0.0-rc.10
@schematics/update                0.900.0-rc.10
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant? my package.json “dependencies”: { “@angular/animations”: “^9.0.0-rc.11”, “@angular/cdk”: “^8.2.0”, “@angular/common”: “~9.0.0-rc.11”, “@angular/compiler”: “~9.0.0-rc.11”, “@angular/core”: “~9.0.0-rc.11”, “@angular/forms”: “~9.0.0-rc.11”, “@angular/localize”: “9.0.0-rc.11”, “@angular/material”: “^8.2.0”, “@angular/platform-browser”: “~9.0.0-rc.11”, “@angular/platform-browser-dynamic”: “~9.0.0-rc.11”, “@angular/router”: “~9.0.0-rc.11”, “@types/rx”: “^4.1.1”, “hammerjs”: “^2.0.8”, “mobx”: “^5.11.0”, “mobx-angular”: “3.0.3”, “ngx-ace-wrapper”: “^8.0.0”, “ngx-socket-io”: “^2.1.1”, “rxjs”: “~6.5.4”, “rxjs-compat”: “^6.5.2”, “tslib”: “^1.10.0”, “zone.js”: “~0.10.2” },

[petebacondarwin]

@TimBailey-pnk - the problem is that $localize is replaced at compile-time with the translated strings. In your case you are passing it a variable that is only known at runtime. $localize is not designed for this kind of runtime behaviour. You have a couple of options:

1. if the text that changes is part of the business logic of the application then I would argue that $localize is not the right tool for the job. As an extreme example, translate.google.com would not use $localize to display the text that is being translated for the user. In that case you own logic should replace the text at runtime using your own code. That being said you could probably load up the translation files that $localize is using and use it in your own logic to access the same translation strings if that was helpful.

2. if the bit of the text that needs to change at runtime is not critical to selecting the translation then you could use interpolation within the translation string. I.E.

$localize `some text ${someRuntimeValue} more text`;

I appreciate that in this scenario neither of these is probably going to fit. One question is where does this data.title come from? Is it hard coded into each route’s configuration somehow? If so perhaps you could apply the $localize at that point rather than inside the component?

[petebacondarwin]

@juanjinario - well the thing is that $localize is not yet a publicly supported API 😃 So there is no documentation on it yet.