Feature(transloco): listen to JSON file changes are update the template while in dev-mode

[micobarac]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

No

Current behavior

Changing translations in json files doesn't refresh translations in templates.

I thought reRenderOnLangChange flag was meant for this functionality, but the documentation seems misleading about this one.

I must reload page for changes to become effective.

Expected behavior

When I change translation json file, I expect the translation to be updated inside templates in dev mode.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/transloco-example

Transloco Config

import { HttpClient } from '@angular/common/http';
import { Injectable, NgModule } from '@angular/core';
import {
  Translation,
  translocoConfig,
  TranslocoLoader,
  TranslocoModule,
  TRANSLOCO_CONFIG,
  TRANSLOCO_LOADER
} from '@ngneat/transloco';
import { Language, Languages } from '@shared/state/language/language.model';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get<Translation>(`assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: Languages.map((language: Language) => language.i18n),
        defaultLang: Languages.find((language: Language) => language.default).i18n,
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: environment.production,
        missingHandler: {
          logMissingKey: false
        }
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
  ]
})
export class TranslocoRootModule {}

Please provide the environment you discovered this bug in

Transloco: 4.1.1
Angular: 14.2.0
Node: 14.2.0
Package Manager: 8.15.0
OS: MacOS Ventura 13.0.1 (22A400)

Browser

Chrome: Version 107.0.5304.121 (Official Build) (arm64)

Additional context

No response

I would like to make a pull request for this bug

No

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• transloco-example (Open reproduction)

[shaharkazaz]

@micobarac I disagree that the docs are misleading, this property is referring to the app's runtime as in calling the setLang method and changing the page's lang without the need for a refresh. it's repeated in a lot of places also in the auto-generated module.

This might be a nice feature to add. Have you tried watching these files via webpack?

[micobarac]

Angular is not watching transloco .json language files. Maybe I am missing some configuration details? Just to be clear, I am not talking about changing the current language. I am talking about hot reloading application when editing existing language .json file.