Wrap Angular templates for ngx-translate automatically

Angular i18n automation has sharp edges most tools cut themselves on: standalone components resolve pipes per-component, aria-label isn't a DOM property, and .instant() calls need constructor injection. Polyglot handles each one explicitly.

The transformation

<h1>Welcome back</h1>
<button aria-label="Refresh the list">Reload</button>

<h1>{{ 'src.app.app.component.welcome_back' | translate }}</h1>
<button [attr.aria-label]="'src.app.app.component.refresh_the_list' | translate">{{ 'src.app.app.component.reload' | translate }}</button>

Three details worth noticing:

• Static attributes become [attr.name] bindings, not [name] property bindings — aria-label on a div or alt on an SVG has no DOM property, and the attribute binding compiles on any element with the original semantics preserved.
• Standalone components get TranslatePipe added to their imports: array (plus the TypeScript import) — Angular 17+ resolves pipes per-component, and a wrapped template without the import is a compile error Polyglot never ships.
• Component-logic strings become this.translate.instant('key') with TranslateService constructor-injected, idempotently.

Catalogs

Keys are written to src/assets/i18n/<lng>.json — the conventional TranslateHttpLoader location — merged with anything already there:

{
  "src": {
    "app": {
      "app": {
        "component": {
          "refresh_the_list": "Refresh the list",
          "reload": "Reload",
          "welcome_back": "Welcome back"
        }
      }
    }
  }
}

{
  "src": {
    "app": {
      "app": {
        "component": {
          "refresh_the_list": "Liste aktualisieren",
          "reload": "Neu laden",
          "welcome_back": "Willkommen zurück"
        }
      }
    }
  }
}

{
  "src": {
    "app": {
      "app": {
        "component": {
          "refresh_the_list": "Actualiser la liste",
          "reload": "Recharger",
          "welcome_back": "Bon retour"
        }
      }
    }
  }
}

Guard rails

If @ngx-translate/core isn't installed at all, Polyglot refuses to wrap and flags every string with install guidance — injecting pipes from a library that isn't there breaks builds, so it won't. Every transformed file is parse-verified before writing.

Try it

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