Angular Internationalisation with ngx-translate, multiple Modules and dedicated .json files

Question

I'm trying to create an angular app with i18n support using ngx-translate. I have 2 sibling modules (page and dashboard) with dedicated i18n .json files for translations. When the application runs, I only get the translation of the last imported module (dashboard) in my browser.

Repository https://github.com/ShayanMHTB/i18n-angular

Here are my main files:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { PageModule } from './page/page.module';
import { DashboardModule } from './dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    PageModule,
    DashboardModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageComponent } from './page/components/page/page.component';
import { DashboardComponent } from './dashboard/components/dashboard/dashboard.component';

const routes: Routes = [
  { path: '', component: PageComponent },
  { path: 'dashboard', component: DashboardComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

page.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PageComponent } from './components/page/page.component';

import { TranslateLoader, TranslateModule, TranslateStore } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    PageComponent
  ],
  imports: [
    CommonModule,

    HttpClientModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (httpLoaderFactory),
        deps: [HttpClient]
      }
    })
  ],
  providers: [ TranslateStore ]
})
export class PageModule { }

export function httpLoaderFactory(_http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(_http, './assets/i18n/page/', '.json');
}

page.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss']
})
export class PageComponent {
  constructor(private _translate: TranslateService) {
    _translate.setDefaultLang('en');
    _translate.use('en');
  }

  useLanguage(language: string): void {
    this._translate.use(language);
  }
}

page.component.html

<div class="container">
  <div class="row">
    <div>
      <h1>
        {{ 'HELLO' | translate }}
      </h1>
    </div>
    <hr>
    <button (click)="useLanguage('en')">English</button>
    <button (click)="useLanguage('de')">German</button>
    <button (click)="useLanguage('fr')">French</button>    
  </div>
</div>

dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DashboardComponent } from './components/dashboard/dashboard.component';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule, TranslateStore } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';


@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,

    HttpClientModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [ TranslateStore ]
})
export class DashboardModule { }

export function httpLoaderFactory(_http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(_http, './assets/i18n/dashboard/', '.json');
}

dashboard.component.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DashboardComponent } from './components/dashboard/dashboard.component';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule, TranslateStore } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';


@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,

    HttpClientModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [ TranslateStore ]
})
export class DashboardModule { }

export function httpLoaderFactory(_http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(_http, './assets/i18n/dashboard/', '.json');
}

dashboard.component.html

<div class="container">
  <div class="row">
    <div>
      <h1>
        {{ 'HELLO' | translate }}
      </h1>
    </div>
    <hr>
    <button (click)="useLanguage('en')">English</button>
    <button (click)="useLanguage('de')">German</button>
    <button (click)="useLanguage('fr')">French</button>    
  </div>
</div>