I18n

[tomalaforge]

Hello,

Very nice project. I have one question: how will you put i18n in that type of architecture ? Like transloco for instance ? One json file per ui component or one global one ? But if you have multiple app sharing the same component, you'll have to duplicate keys.

Thanks

[trungvose]

@tomalaforge Great question, I don't really have experience with angular i18n so let me do some reading first before answering your question. @nartc Do you have any input? 😎

[nartc]

@tomalaforge Hi, for shared UI components (containing static texts that need to be translated), we can store the translations for these Shared components in a JSON file under scope common or shared.

We can initialize Transloco in a separate module with forRoot() for Multiple applications. In different apps, when calling this module, we can call forRoot() from the parent app and pass in different configuration to alter Transloco providers

[tomalaforge]

@nartc I haven't thought of passing all config files thought forRoot(). I was looking on inline loader but that's not working for static UI components.

But do you have an example of your forRoot() app, you 're overwriting the TRANSLOCO_LOADER token?

[nartc]

@tomalaforge I don't have an example but it should be just a ModuleWithProvider where we would provide a new value for TRANSLOCO_LOADER from each application.

Maybe some pseudo code

// TranslocoModule
export class TranslocoModule {
   static forRoot(config) {
      return {
         ngModule: TranslocoModule,
         providers: [
            { provide: TRANSLOCO_LOADER, useValue: config.loader }
         ]
      }
   }
}

// app1.module.ts
@NgModule({
   imports: [
      TranslocoModule.forRoot({ loader: something_for_app_1 })
   ]
})
export class App1Module {}

// app2.module.ts
@NgModule({
   imports: [
      TranslocoModule.forRoot({ loader: something_for_app_2 })
   ]
})
export class App2Module {}

[tomalaforge]

Thanks very much. Sound promising. I'll try it.