[Angular]

Mark Angular templates for @angular/localize automatically

Polyglot adds i18n attributes and $localize tags in place — compile-time i18n with ng extract-i18n as the source of truth, plus a starter XLIFF so you're never starting blank.

1 Min. LesezeitAlle Frameworks

@angular/localize is compile-time i18n: you mark templates, ng extract-i18n produces the XLIFF, and the build emits per-locale bundles. Polyglot automates the marking.

The transformation

Before — src/app/app.component.html
<h1>Welcome back</h1>
<p>Your projects are ready</p>
After — src/app/app.component.html
<h1 i18n="@@src.app.app.component.welcome_back">Welcome back</h1>
<p i18n="@@src.app.app.component.your_projects_are_ready">Your projects are ready</p>
  • Elements get i18n="@@key" attributes; translatable attributes get i18n-title="@@key" markers.
  • Component-logic strings become $localize tagged templates.
  • Rich/nested content is marked at the enclosing element and delegated to ng extract-i18n, which handles placeholders natively — Polyglot never hand-approximates what the extractor does correctly.

The catalog story

Polyglot writes a simple-case starter messages.xlf so your pipeline runs immediately — and tells you to run ng extract-i18n for the authoritative catalog. The extractor is the source of truth in this mode; the CLI's summary says so explicitly.

Written — src/locale/messages.xlf
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="src.app.app.component.welcome_back" datatype="html">
        <source>Welcome back</source>
      </trans-unit>
      <trans-unit id="src.app.app.component.your_projects_are_ready" datatype="html">
        <source>Your projects are ready</source>
      </trans-unit>
    </body>
  </file>
</xliff>
Written — src/locale/messages.de.xlf
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
    </body>
  </file>
</xliff>
Written — src/locale/messages.fr.xlf
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
    </body>
  </file>
</xliff>
Wrapped 2 string(s) across 1 file(s); 0 skipped; 0 flagged for manual review.
✓ wiring checks passed (0 injected import(s), 0 catalog value(s), 0 catalog file(s))

Try it

$ curl -fsSL https://getpolyglot.ai/install.sh | bash
$ polyglot init --framework angular
$ polyglot scan
$ polyglot wrap
$ polyglot translate --languages de   # 50 strings free, no signup

Im Terminal starten

Schluss mit der Suche nach unübersetzten Strings.

Installieren Sie die CLI, führen Sie einen Scan durch und sehen Sie genau, was Ihnen fehlt. Kostenlos, kein Konto erforderlich.

$curl -fsSL https://getpolyglot.ai/install.sh | bash
Mark Angular templates for @angular/localize automatically | Polyglot