Module Federation: How can I make static files (assets/i18n) available to the remote(MFE) when it is used inside a shell #1584

axell9641 · 2022-02-11T23:47:23Z

axell9641
Feb 11, 2022

Hi.
I have an Angular application that consists of several angular projects (MFE's) loaded inside a single shell. All of this is achieved using this plugin.
Everything works well, but now we need to add i18n, it's unpractical to have all the strings defined in the shell like this:

Since the package we use for i18n, ngx-translate ,supports loading translation from feature modules, we're looking for a way that let us define them inside the same folder of the feature module so that they would be also available when they're loaded inside the shell.

So far the only way I've found to share the translations defined in each remote is the following:

Define our i18n json files inside the feature module that is exposed (requests) via module federation
Implement a custom translation loader and inside import every json file. That way those files will be part the code being exported

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


export class CustomTranslationLoader implements TranslateLoader  {
  languages: any = {
    en,
    es
  }
  constructor() {}

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

Finally use the previously defined custom translation loader inside the feature module

@NgModule({
      declarations: [
        ...
      ],
      imports: [
        CommonModule,
        TranslateModule.forChild({
          defaultLanguage: 'es',
          loader: {
            provide: TranslateLoader,
            useClass: CustomTranslationLoader,
          },
          isolate: true
        }),
        RequestsRoutingModule,
      ]
    })
    export class RequestsModule

This works, but I don't like the idea of having to manually import every single translation file like I do in step 2. I'd like to find a way to dynamically load the require file using the http client. Something like this:

export class CustomTranslationLoader implements TranslateLoader  {

  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
      return this.http.get('../assets/i18n' + lang + '.json');
  }
}

Unfortunately this is not possible since only static files inside src/assets are served.

I also tried adding my new folder to the angular.json file like this, but those files are available during development:

Do you know how can I achieve what I describe above or perhaps a better way of exposing the translations (en.json, es.json, etc) each remote defines so that the shell can add them to its own translations?

Thanks.