Angular 9 $localize not working with --configuration=de

Question

When using $localize from "@angular/localize/" with " ng serve --configuration=de " i get this:

It works perfect when running the project with just " ng serve ".

in app.component.ts

public product: TabDefinition = { name: $localize`Products`, route: "/products" };

in Polyfills.ts

import "@angular/localize/init";
import { loadTranslations } from "@angular/localize";

loadTranslations({
    "6707361102856436710": "Produkte",
  });

Answer 1

What i have done is make a TranslationComponent , as long as you specify the id in the template and in the $localize call it will map correctly

<p i18n="@@pending-changes">You have unsaved changes are you sure you want to navigate?</p>

return confirm($localize`:@@pending-changes:You have unsaved changes are you sure you want to navigate?`);

   <trans-unit id="pending-changes" datatype="html">
        <source>You have unsaved changes are you sure you want to navigate?</source>
        <target state="translated">Vous avez des modifications non enregistrées, êtes-vous sûr de vouloir naviguer?</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/shared/component/translations/translations.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>

Cheers

Answer 2

Did you add this

import '@angular/localize/init'; 

to your polyfills.ts file?

Maybe there is path problem. Try this:

import '../node_modules/@angular/localize/init';