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.

Answer 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"
            },
            ...
          }
        },
        ...
      }
    }
  },
  ...
}