Getting Cannot read properties of null (reading 'preSaveTranslation') issue while trying to load a language.

[patilsiddhesh794]

I am trying to use Transloco but its giving this issue. My file path is correct and the json files are returning data as well in get request, but still getting this error. Below is my transloco module code which I am using:

`import {
DefaultFallbackStrategy,
DefaultTranspiler,
Translation,
TRANSLOCO_CONFIG,
TRANSLOCO_FALLBACK_STRATEGY,
TRANSLOCO_INTERCEPTOR,
TRANSLOCO_LOADER,
TRANSLOCO_MISSING_HANDLER,
TRANSLOCO_TRANSPILER,
translocoConfig,
TranslocoLoader,
TranslocoModule
} from '@ngneat/transloco';
import { Injectable, isDevMode, NgModule } from '@angular/core';
// import { TranslocoHttpLoader } from './transloco-loader';
import { HttpClient } from '@angular/common/http';

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

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

@NgModule({
exports: [TranslocoModule],
providers: [
{
provide: TRANSLOCO_CONFIG,
useValue: translocoConfig({
availableLangs: ['en', 'fr', 'hi'],
defaultLang: 'en',
fallbackLang: 'en',
reRenderOnLangChange: true,
prodMode: true,
}),
},
{ provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
{
provide: TRANSLOCO_TRANSPILER,
useClass: DefaultTranspiler // Use an empty object if you don't have a custom transpiler
},
{
provide: TRANSLOCO_MISSING_HANDLER,
useValue: (key: string) => {
console.warn(Missing translation for ${key});
return key; // You can return the key as a fallback
}
},
{
provide: TRANSLOCO_INTERCEPTOR,
useValue: null
},
// Provide Fallback Strategy
{
provide: TRANSLOCO_FALLBACK_STRATEGY,
useClass: DefaultFallbackStrategy,
},
],
})
export class TranslocoRootModule { }
`