@ngx-translate/multi-webpack-loader

A loader for ngx-translate that loads translations using webpack imports of json files.

• Installation
• Usage
• Tip

Installation

We assume that you already installed ngx-translate.

Now you need to install the npm module for MultiWebpackLoader:

1npm install ngx-translate-multi-webpack-loader --save

Usage

Setup the TranslateModule to use the MultiWebpackLoader:

The MultiWebpackLoader uses webpack imports of json files to load translations

1import {NgModule} from '@angular/core';
2import {BrowserModule} from '@angular/platform-browser';
3import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
4import {MultiWebpackLoader} from "ngx-translate-multi-webpack-loader";
5import {AppComponent} from "./app";
6
7
8
9export class LazyTranslateLoader implements TranslateLoader {
10  public getTranslation(lang: string): Observable<any> {
11    return MultiWebpackLoader.getTranslation(I18NFiles(lang));
12  }
13} 
14
15//It has to be an array of webpack import.
16export function I18NFiles( lang: string) {
17    return [
18     import(`../assets/i18n/${lang}.json`),
19     import(`../app/pages/my-project/assets/i18n/${lang}.json`),
20    ]
21}
22
23
24@NgModule({
25    imports: [
26        BrowserModule,
27        TranslateModule.forRoot({
28            loader: {
29                provide: TranslateLoader,
30                useClass: LazyTranslateLoader
31            }
32        })
33    ],
34    bootstrap: [AppComponent]
35})
36export class AppModule { }

Tip

For enable json import add

1"compilerOptions": {
2    ...
3    "resolveJsonModule": true,
4    "esModuleInterop": true,
5    ...
6}