在Angular 7中将工厂方法从AppModule移至AppComponent

Question

I use ngx-translate-multi-http-loader loader to create specific translations. The documentation requires that this factory has to be created within the app.module.ts:

export function multiTranslateHttpLoaderFactory(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    {prefix: './assets/i18n/default/', suffix: '.json'},
    {prefix: './assets/i18n/bc/', suffix: '.json'}
  ]);
}

This factory is configured inside the import arrays in this way:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: multiTranslateHttpLoaderFactory,
    deps: [HttpClient]
  }
}),

I need a way to put the factory into my app.component.ts, because I still have to program some logic and do not want to do that within my app.module.ts.

But if I move the method into my app.component.ts and make all the necessary import statements on top of the file, angular doesn't compile and returns this error message:

ERROR in src / app / app.module.ts (55,21): error TS2304: Can not find name 'multiTranslateHttpLoaderFactory'.

Is there a possibility or do I really have to define the factory within app.module.ts ???

Answer 1

It really should not matter where you define your factory, or any other function for that matter. Just be sure to import it correctly, somewhere in the top of app.module.ts

import {multiTranslateHttpLoaderFactory} from 'path/to/your/component'