Not loading dictionary in lazy-module for ngx-translate in Angular 16+

After migrationg on Angular 16+ not loading dictionaries in lazy-modules. I tried everything I found in the answers on StackOverflow. I wrote simple application, which demonstrate thia problem. The child module (chills.module) does not retain the loader that is defined in сreateChillsLoader.

import {NgModule} from '@angular/core';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {AppComponent} from './app.component';
import {BrowserModule} from '@angular/platform-browser';
import {RouterLink, RouterModule, RouterOutlet} from '@angular/router';
import {HttpClient, provideHttpClient} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {routes} from './app.routes';

export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http,
'./assets/i18n/app/main.', '.json');
}

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
},
extend: true
}
), RouterOutlet, RouterLink, RouterModule.forRoot(routes)],
bootstrap: [AppComponent],
providers: [provideHttpClient()]
})
export class AppModule {

}


app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [{
path: 'chills',
loadChildren: () => import('../app/modules/chills/chills.module').then(m => m.ChillsModule)
},
];


chills.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {TranslateModule} from '@ngx-translate/core';
import {HttpClient} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {Route, RouterModule} from '@angular/router';
import {ChillsviewComponent} from './chillsview/chillsview.component';

export function createChillsLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/app/chills.');
}

const routes: Route[] = [
{path: '', component: ChillsviewComponent},
]

@NgModule({
declarations: [ChillsviewComponent],
imports: [
RouterModule.forChild(routes), CommonModule, TranslateModule.forChild({
loader: {
provide: TranslateModule,
useFactory: createChillsLoader,
deps: [HttpClient]
},

extend: true,
useDefaultLang: true,
defaultLanguage: 'en'
})
],
exports: [RouterModule]
})

export class ChillsModule { }


chillsview.component.html

<p>{{ 'chills' | translate }}</p>


package.json

"dependencies": {
"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "8.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
},


[Module factory function invoke on loading "chills" module] (https://i.sstatic.net/OOGj8p18.png)

but was loaded "main" dictionary

Maybe someone has encountered this situation?

Continue reading...