ERROR: Can't resolve all parameters for CustomTranslateLoader ... json import problem?

user_6691741 0
Viewed 584

I'm using translate and I had to write my own loader because the default one was based on httpClient. My solution works, the project starts and languages ​​change. So everything works very well. Unfortunately, when I try to build ng build my-lib --prod I get an error. I guess it's related to json? (Angular 9).

custom-loader.ts

import { TranslateLoader } from '@ngx-translate/core';
import { Observable, of } from 'rxjs';
import * as en from '../../../lib-assets/i18n/en.json';
import * as pl from '../../../lib-assets/i18n/pl.json';

export class CustomTranslateLoader implements TranslateLoader {
  constructor(private availableLang: any = { en, pl }) {}
  getTranslation(lang: string): Observable<any> {
    return of(this.availableLang[lang].default);
  }
}

tsconfig.json

"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,

error after ng build my-lib --prod:

ERROR: Can't resolve all parameters for CustomTranslateLoader in /Projects/my-app/projects/my-lib/src/lib/core/translate/custom-loader.ts: (?).

An unhandled exception occurred: Can't resolve all parameters for CustomTranslateLoader in /Projects/my-app/projects/my-lib/src/lib/core/translate/custom-loader.ts: (?).
ngx-translate angular9 angular typescript
4 Answers

It occurs because of this I guess : constructor(private availableLang: any = { en, pl }) {}

If you want to provide availableLang = { en, pl } then initializing it in OnInit() life cycle hook is a better place. We use constructor for dependency injection mainly. Try to implement this change.

user_83108270

It's because of the initialization of the param avilableLang as Adya pointed out.

There are different set of rules for compiling against AOT and JIT. So try to initialize the variable outside of constructor.

user_97641330 
export class CustomTranslateLoader implements TranslateLoader {

  // original code doesn't have key in the object. you must have key in the object as shown below

  private availableLang: any = { en: en, pl: pl };          

  constructor() {}

  getTranslation(lang: string): Observable<any> {
    return of(this.availableLang[lang].default);
  }
}
user_37517110

Have you did the below code in your app.module.ts

 TranslateModule.forRoot({
 
      loader: {
  
        provide: TranslateLoader,
  
        useClass: CustomTranslateLoader
  
  
      }
  
     })
user_60389190
Related