[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 readAll 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

Start in your terminal

Stop hunting for untranslated strings.

Install the CLI, run a scan, and see exactly what you're missing. Free, no account required.

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