Angular i18n 拆分翻译文件

Question

I started to translate my Angular app using the i18n method,
Since the translation file is really long, and unreadable, and I would probably need in the future to go back and update it I want to split it, for example like this:

assets/
└── i18n/
   ├── users/
   │   ├── en.json
   │   └── fr.json
   └── products/
       ├── en.json
       └── fr.json 

The splitting is not per component but per context of the app.
How can I achieve this splitting?

Answer 1

the context in you case, I assume it's modules, all you have to do, is to create as many folders as you modules(context), in witch you're gonna have your language files.json stored, then adjust you app.modules as follow:

TranslateModule.forChild({
              loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            },
            isolate: true
        }),

ps : the 'isolate' is important to be able to re-instantiate your translate module.

with 'createTranslateLoader' the function that loads translattion files from the proper folder as below (users for exemple) :

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/users/', '.json');
}

there you go :)

Answer 2

You can use Angular i18n Merge Files provided that you change the file names to adhere to the pattern used by this tool.

Rename the files on the /assets folder to have its filenames matching the pattern *.messages.*.json :

assets/
└── i18n/
   ├── users/
   │   ├── users.messages.en.json
   │   └── users.messages.fr.json
   └── products/
       ├── products.messages.en.json
       └── products.messages.fr.json 

Run:

npx ng-i18n-merge-files -f json -o ./assets/i18n

And it will generate the following files with the merged content:

assets/
└── i18n/
   ├── messages.en.json
   └── messages.fr.json