Skip to content

fix: English UI rendered raw translation keys after the ngx-translate v18 upgrade - #388

Merged
hokiepokedad2 merged 1 commit into
mainfrom
fix/en-translations-not-loading
Aug 5, 2026
Merged

fix: English UI rendered raw translation keys after the ngx-translate v18 upgrade#388
hokiepokedad2 merged 1 commit into
mainfrom
fix/en-translations-not-loading

Conversation

@hokiepokedad2

@hokiepokedad2 hokiepokedad2 commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Fixes #389

Fixes the v2.12.0 regression reported in Discord: every UI label renders its raw key (NAV.DASHBOARD, AUTH.SIGN_IN) — but only in English. Other locales are unaffected.

This is my regression from #377, and the "only English" shape is the clue that explains it.

Cause

The v18 migration renamed defaultLanguagefallbackLang in provideTranslateService(). Those are not equivalent in timing:

  • v17 defaultLanguage was inert — it recorded a preference and loaded nothing.
  • v18 fallbackLang is loaded eagerly, from inside the TranslateService constructor.

So the config-level fallback resolves TranslateLoader while the injector is still constructing TranslateService:

NG0200: Circular dependency detected for `_TranslateService`

The HTTP loader catches this and downgrades it to a console warning (error loading translation for en), so nothing crashed and CI stayed green — English just never loaded. Every other locale is requested later via use(), after bootstrap, when the injector is complete. Hence a failure that looks language-specific but is really fallback-language-specific.

Fix

Drop fallbackLang from the provider config. I18nService.init() already calls setFallbackLang('en') after bootstrap, which is a safe point — no behaviour is lost.

Verification

Reproduced in the real deployment first. Loaded the dev instance in a browser and captured both symptom and cause:

heading "AUTH.SITE_TITLE_DEFAULT"
paragraph: AUTH.BRAND_DESC
button "AUTH.SIGN_IN_DISCORD"

[console] @ngx-translate/http-loader: error loading translation for en: NG0200

Then verified the fix in a browser, built and served locally:

heading "DM Alerts"
heading "Sign In"
button "Sign in with Discord"

NG0200 gone; the only remaining console errors are failed API calls with no backend running.

Regression tests drive the real appConfig providers rather than a hand-rolled copy, so re-adding fallbackLang to the provider config fails CI instead of shipping. Three cases: TranslateService constructs without a circular dependency, no translation is fetched before a language is requested (an eager fallback load would show up here), and English loads through the configured HTTP loader once requested.

I confirmed the tests actually catch it by re-introducing fallbackLang and watching them fail with the same NG0200: Circular dependency detected for _TranslateService.

875 frontend tests pass, lint and prettier clean.

Why unit tests missed it originally

The v18 migration's tests used provideTranslateService() with no loader, so translations resolved synchronously in-memory and the constructor-time load never happened. The bug needs the real provider wiring — config-level fallbackLang plus an async HTTP loader — which is exactly what the new tests now supply.

… v18 upgrade

Reported after v2.12.0: every label showed its key (NAV.DASHBOARD,
AUTH.SIGN_IN), but only in English -- other locales were fine.

Cause. The v18 migration (#377) renamed `defaultLanguage` to `fallbackLang` in
provideTranslateService(). v17's `defaultLanguage` was inert; v18 loads the
fallback language *eagerly from inside the TranslateService constructor*. That
resolves TranslateLoader while the injector is still constructing
TranslateService, so it fails with:

  NG0200: Circular dependency detected for `_TranslateService`

The loader swallows it as a warning ("error loading translation for en"), so
nothing crashed -- English simply never loaded. Every other locale loads later
via use(), after bootstrap, when the injector is complete, which is exactly why
the failure looked language-specific.

Fix. Drop `fallbackLang` from the provider config. I18nService.init() already
calls setFallbackLang('en') after bootstrap, which is a safe point.

Verified in a real browser, not just unit tests: reproduced on the deployed dev
instance (login page rendering AUTH.SITE_TITLE_DEFAULT with the NG0200 warning
in console), then built the fix and loaded it locally -- "DM Alerts" / "Sign In"
render correctly and the NG0200 warning is gone.

The regression tests drive the real appConfig providers rather than a
hand-rolled copy. Confirmed they have teeth by re-adding `fallbackLang` and
watching them fail with the same NG0200. 875 frontend tests pass, lint and
prettier clean.
@github-actions github-actions Bot added the fix label Aug 5, 2026
@hokiepokedad2 hokiepokedad2 added the bug Something isn't working label Aug 5, 2026
@hokiepokedad2
hokiepokedad2 merged commit d42e69f into main Aug 5, 2026
10 checks passed
@hokiepokedad2
hokiepokedad2 deleted the fix/en-translations-not-loading branch August 5, 2026 18:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

English UI renders raw translation keys after v2.12.0 (NG0200 loading the fallback language)

1 participant