Skip to content

v18.0.0

Latest
Latest

Choose a tag to compare

View all tags
@CodeAndWeb CodeAndWeb released this 09 Jun 14:46
v18.0.0
d42c871

@ngx-translate/core@18.0.0 and @ngx-translate/http-loader@18.0.0 are now stable on npm (latest).

v18 is the major API-cleanup release: standalone providers everywhere, signal-based internals, the default → fallback rename finalized, and the deprecated surface removed. It also resolves three long-standing semantic gotchas and baselines the workspace on Angular 22 / TypeScript 6.0.

Highlights

  • Standalone-first setup. TranslateModule is gone — use provideTranslateService() / provideChildTranslateService() (works in standalone and NgModule apps).
  • New *translateBlock="let t" structural directive for cleaner template translations.
  • New isLoading: Signal<boolean> — true while any use() load is in flight; read it for language-switching spinners.
  • Isolated subtrees are now truly isolated — own events, lookups, and language state.
  • Angular 18–22 supported (16 and 17 dropped); built and tested against Angular 18/19/20/21/22.

Breaking changes — required edits

TranslateModule removed. Replace TranslateModule.forRoot({...}) / forChild({...}) with provideTranslateService({...}) / provideChildTranslateService({...}). The pipe, directive, and service are standalone.

Deprecated default* symbols removed — rename:

Removed Replacement
defaultLang fallbackLang
setDefaultLang() setFallbackLang()
getDefaultLang() getFallbackLang()
onDefaultLangChange onFallbackLangChange
DefaultLangChangeEvent FallbackLangChangeEvent
langs getLangs()
setValue() (util) insertValue()

Also removed: useDefaultLang and defaultLanguage config fields (along with TranslateModule).

Deprecated (still works, warns once): using element text content as a key (<span translate>Hello</span>). Use [translate]="'KEY'", the translate pipe, or *translateBlock. It will be removed next major.

Potentially breaking — low impact (behavior changes)

  • A failed use() no longer mutates state. On loader failure, currentLang() / lastUseLanguage stay at the prior value instead of switching to the failed language. Use isLoading() or the returned Observable's error channel to drive switching UI.
  • Isolated subtrees no longer see ancestor translationChange$ events, nor borrow keys from outer scopes. Isolation now means own events + own lookups + own language state. If you wanted shared translations with subtree-scoped state, use provideChildTranslateService({ extend: true }).
  • instant() "unloaded language" warning is deduplicated per isolated subtree (was once per service instance).
  • ITranslateService gains isLoading: Signal<boolean>. If you mock it via implements/extends ITranslateService, add isLoading = signal(false).asReadonly(). See the "Mocking TranslateService" recipe in the README.
  • Loader errors are now logged instead of silently swallowed.

Migration

Full step-by-step guide: https://ngx-translate.org → Getting Started → Migration Guide.

Angular compatibility: 18, 19, 20, 21, 22 · TypeScript: 6.0 · RxJS: ≥7

Assets 2
Loading