import { provideWrI18n, provideWrI18nBaseCatalogs, provideWrI18nStaticLoader } from 'ngwr/i18n';
import { wrEn } from 'ngwr/i18n/en';
import { wrRu } from 'ngwr/i18n/ru';
bootstrapApplication(AppComponent, {
providers: [
provideWrI18n({ defaultLocale: 'en', availableLocales: ['en', 'ru'] }),
provideWrI18nBaseCatalogs({ en: wrEn, ru: wrRu }),
provideWrI18nStaticLoader({
en: { app: { title: 'My app' } },
ru: { app: { title: 'Моё приложение' } },
}),
],
});Setup & loaders
Provide WrI18n and load your catalogs.
Static loader
Catalogs inline at bootstrap; pass only your own keys.
HTTP loader
One JSON file per locale; needs provideHttpClient().
import { provideHttpClient } from '@angular/common/http';
import { provideWrI18n, provideWrI18nBaseCatalogs, provideWrI18nHttpLoader } from 'ngwr/i18n';
import { wrRu } from 'ngwr/i18n/ru';
bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(),
provideWrI18n({ defaultLocale: 'ru', availableLocales: ['ru'] }),
provideWrI18nBaseCatalogs({ ru: wrRu }),
provideWrI18nHttpLoader({ path: '/assets/i18n/{locale}.json' }),
],
});Missing-key handler
By default a missing key renders as the key itself.
provideWrI18n({
defaultLocale: 'en',
availableLocales: ['en', 'ru'],
missingHandler: (key) => '⚠️ ' + key,
});Shipped catalogs
One entry point per language.
| Import from | Export | Language |
|---|---|---|
ngwr/i18n/ar | wrAr | العربية — Arabic |
ngwr/i18n/cs | wrCs | čeština — Czech |
ngwr/i18n/de | wrDe | Deutsch — German |
ngwr/i18n/en | wrEn | English — English |
ngwr/i18n/es | wrEs | español — Spanish |
ngwr/i18n/fr | wrFr | français — French |
ngwr/i18n/he | wrHe | עברית — Hebrew |
ngwr/i18n/hi | wrHi | हिन्दी — Hindi |
ngwr/i18n/id | wrId | Indonesia — Indonesian |
ngwr/i18n/it | wrIt | italiano — Italian |
ngwr/i18n/ja | wrJa | 日本語 — Japanese |
ngwr/i18n/ko | wrKo | 한국어 — Korean |
ngwr/i18n/nl | wrNl | Nederlands — Dutch |
ngwr/i18n/pl | wrPl | polski — Polish |
ngwr/i18n/pt | wrPt | português — Portuguese |
ngwr/i18n/ru | wrRu | русский — Russian |
ngwr/i18n/sv | wrSv | svenska — Swedish |
ngwr/i18n/tr | wrTr | Türkçe — Turkish |
ngwr/i18n/uk | wrUk | українська — Ukrainian |
ngwr/i18n/vi | wrVi | Tiếng Việt — Vietnamese |
ngwr/i18n/zh | wrZh | 中文 — Chinese |
ngwr/i18n/zh-TW | wrZhTw | 中文(台灣) — Chinese (Taiwan) |
A region falls back to its language: pt-BR uses pt.
Gotchas
| Symptom | Fix |
|---|---|
| ngwr's labels stay in English once you add a loader | provideWrI18nBaseCatalogs({ ru: wrRu }) |
Keys go missing after { ...wrRu, ...yours } | Use base catalogs, not a spread |
zh-HK and zh-Hant show Simplified Chinese | Map them to zh-TW |
use('de') does nothing | Add 'de' to availableLocales |
A changed defaultLocale does not apply | The last locale is stored; set storageKey: null to stop that |
See also
Guide Usage in templatesRead a translation with the wrT pipe, the [wrT] directive or the WrI18n service.Service WrI18nTranslate strings at runtime and switch the locale without a reload.Guide ScopesLoad a feature's catalog only when the feature loads.Docs ConfigurationSet app-wide options at bootstrap.Guide FormsBind ngwr controls to any Angular form and show their errors.