Global $localize method in Angular 9 returns the text itself

Question

I've been following the tutorials on how to use $localize, and have been trying to use it as follows:

My angular.json (related parts):

        "build": {
          ...
          "configurations": {
            ...
            "fr-FR": {
              "aot": true,
              "outputPath": "dist/fr-FR",
              "i18nFile": "src/locale/messages.fr.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "fr-FR",
              "i18nMissingTranslation": "error"
            }
          }
        },
        "serve": {
         ...
          "configurations": {
            ...
            "fr-FR": {
              "browserTarget": "frontend:build:fr-FR"
            }
          }
        },

and running the app with: ng serve --configuration=fr-FR

When I use the i18n attribute in my templates as follows:

<p i18n="@@profile">Profile</p>

and have the following entry in my messages.fr.xlf:

      <trans-unit id="profile" datatype="html">
        <source>Profile</source>
        <target>Profil</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/profile/profile.component.html</context>
          <context context-type="linenumber">34</context>
        </context-group>
      </trans-unit>

everything works as expected. But now I need to access the translation within the typescript, say (profile.component.ts). For this, I have the following:

let profileText = $localize`:@@profile`;
console.log(profileText);

This results in the following error in the console:

ERROR Error: Unterminated $localize metadata block in ":@@profile".

and if I try as follows:

let profileText = $localize`:@@profile:Profile`;
console.log(profileText);

the error is gone, but it always prints Profile, not the translation. What am I missing?

Update:

Please find the StackBlitz link. The thing about it is that; I don't think that StackBlitz takes into account --configuration=fr-FR (from package.json) when running and the behavior is the same.

Update 2:

StackBlitz link might be misleading, as I don't know how to run the project with a specific configuration (say, --configuration=fr-FR). So I've replicated the issue in a Github repo.

score 1 · Accepted Answer · edited May 05 '20 at 08:44

1

Remove enableIvy: false from your tsconfig.json (basically enable Ivy) and correct the i18n configuration in your angular.json as follows as per doc:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-name": {
      ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": "src/locale/messages.fr.xlf"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...
          "configurations": {
            "fr-FR": {
              "localize": [
                "fr"
              ]
            },
            ...
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          ...
          "configurations": {
            "fr-FR": {
              "browserTarget": "project-name:build:fr-FR"
            },
            ...
          }
        },
        ...
      }
    }
  },
  ...
}

edited May 05 '20 at 08:44

Hasan Can Saral

2,950
5
43
78

answered May 02 '20 at 17:14

HTN

3,388
1
8
18

Thanks for the answer. I had already tried this configuration, and the behavior is the same. – Hasan Can Saral May 02 '20 at 19:11
I've updated the question with a StackBlitz link to replicate the issue. Could you have a look and see what's wrong with it? – Hasan Can Saral May 03 '20 at 08:58
I don't use stackBlitz, so I don't know how to run app with `serve` and `configuration`, I think it is running in production mode. However, I found out in `package.json` that you are using Angular CLI 7 with Angular 9. Of course, it won't work. – HTN May 03 '20 at 11:58
I agree that StackBlitz might not be configurable to run in the correct configuration but I'm not sure it has to do with the Angular cli version. In my local workstation, I have 9.1.2 and the behavior is the same. – Hasan Can Saral May 03 '20 at 12:05
1

I just uploaded a working demo to my github repo. You can give a look at it: https://github.com/vannhi/angular9-i18n-demo – HTN May 03 '20 at 12:29
Thank you, I appreciate it. Indeed your example works smoothly. I was finally able to replicate the issue in a github repo (The text on html is rendered correctly but if you look at the console, you'll see the untranslated text): https://github.com/hasancansaral/localize-demo Could you kindly check and see what's wrong? I'd highly appreciate it. – Hasan Can Saral May 04 '20 at 19:43
1

You disable ivy in your project, so it does not work. – HTN May 04 '20 at 20:53
I have the same kind of setup, like when I compared my file to this answer, it looks to be the correct way but I still get the error when I try to extract the translation terms. – Junaid Aug 06 '21 at 11:08
@Junaid The answer is old. We are having Angular 12 now. I can't help without a reproducible example. – HTN Aug 09 '21 at 08:25
@HTN thank you for writing back. I'll create an example & will share it shortly. – Junaid Aug 09 '21 at 12:31

Global $localize method in Angular 9 returns the text itself

1 Answers1