Angular
ShipEasyI18n integration for Angular — ShipEasyI18nModule, i18n pipe for template translations, and ShipEasyI18nService for programmatic access.
Package: @i18n/angular
Install
npm install @i18n/angularScript tag
Add the loader to src/index.html:
<!-- src/index.html -->
<head>
<script
src="https://cdn.i18n.shipeasy.ai/v1/loader.js"
data-key="i18n_pk_your_key_here"
data-profile="en:prod"
async
></script>
</head>Module setup
Import ShipEasyI18nModule into your root AppModule:
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ShipEasyI18nModule } from '@i18n/angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
ShipEasyI18nModule.forRoot({
i18nKey: 'i18n_pk_your_key_here',
profile: 'en:prod',
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}For standalone components, use provideShipEasyI18n() in bootstrapApplication instead.
i18n pipe in templates
Use the i18n pipe directly in any template — no imports needed after ShipEasyI18nModule is registered:
<!-- nav.component.html -->
<nav>
<a routerLink="/">{{ 'nav.home' | i18n }}</a>
<a routerLink="/account">{{ 'nav.account' | i18n }}</a>
<button>{{ 'checkout.submit' | i18n }}</button>
</nav>Pipe variables are passed as the second argument:
<h1>{{ 'user.greeting' | i18n : { name: user.name } }}</h1>ShipEasyI18nService injection
For programmatic access inside component or service classes:
// header.component.ts
import { Component } from '@angular/core';
import { ShipEasyI18nService } from '@i18n/angular';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
})
export class HeaderComponent {
constructor(private i18n: ShipEasyI18nService) {}
getTitle(): string {
return this.i18n.t('site.title');
}
get ready(): boolean {
return this.i18n.ready;
}
}ShipEasyI18nService also exposes locale$ — an Observable<string> that emits whenever the active profile changes.
For the full implementation spec including package source code and edge cases, see plans/frameworks/angular.md in the repository.
Framework Guides
ShipEasyI18n integrations for every major web framework — from npm packages for React and Next.js to server-side adapters for Rails, Django, and Laravel.
Astro
ShipEasyI18n integration for Astro — no package needed, use the CDN script tag, detect SSR profiles from Astro.request, and inject inline label data via define:vars.