angularinternationalizationtransloco

transloco-preload-langs failes with "No provider for TranslocoPreloadLangsService" in angular application

In my application I'm using @ngneat/transloco. Recently I updated angular from v12 to v16 and there were no problems with transloco. Now I need language preload feature therefore @ngneat/transloco-preload-langs was installed. I followed official documentation and added provideTranslocoPreloadLangs() to transloco-root.module.

However in runtime I see this error: enter image description here

package.json

"dependencies": {
    "@angular/animations": "^16.2.6",
    "@angular/common": "^16.2.6",
    "@angular/compiler": "^16.2.6",
    "@angular/core": "^16.2.6",
    "@angular/forms": "^16.2.6",
    "@angular/platform-browser": "^16.2.6",
    "@angular/platform-browser-dynamic": "^16.2.6",
    "@ngneat/transloco": "6.0.0",
    "@ngneat/transloco-preload-langs": "5.0.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.13.0"
  },

transloco-root.module

@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: [
    provideTranslocoPreloadLangs(["en"]),
    provideTransloco({
      config: {
        availableLangs: ["en", "tr"],
        defaultLang: "en",
        prodMode: environment.production
      },
      loader: TranslocoHttpLoader
    })
  ]
})
export class TranslocoRootModule {}

app.module

@NgModule({
  declarations: [AppComponent ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    HttpClientModule,
    SharedModule,
    LayoutModule,
    ...
    TranslocoRootModule,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

NOTE: I did not convert components to standalone version yet. This should not affect I believe but I'm not sure.

Also there is no issue related to this on github https://github.com/ngneat/transloco/issues

Did someone face this problem?

Solution

  • seems like the issue has been resolve in @ngneat/transloco-preload-langs@5.0.1

    here is the bug report