How to add @ngx-translate/http-loader to Anugular 2/6 app

gistfile1.txt

More info on this here:
https://github.com/ngx-translate/http-loader
https://stackblitz.com/github/ngx-translate/example?file=src%2Fapp%2Fapp.component.ts

1) Install through npm:
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

2) In 'main-page.module':
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import Bootstrap
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// Import components
import { MainPageComponent } from './main-page.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { FooterComponent } from './components/footer/footer.component';
import { JumbotronComponent } from './components/jumbotron/jumbotron.component';
import { AdvertisementsComponent } from './components/advertisements/advertisements.component';
import { RouterModule } from '@angular/router';
// Translate
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/main-page/', '.json');
}

@NgModule({
  imports: [
    CommonModule,
    NgbModule.forRoot(),
    RouterModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [
    MainPageComponent,
    NavbarComponent,
    FooterComponent,
    JumbotronComponent,
    AdvertisementsComponent
  ],
  bootstrap: [MainPageComponent],
  exports: [MainPageComponent]
})
export class MainPageModule {}

2) In 'main-page.component':
import { Component, OnInit } from '@angular/core';
// Import translate service
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.scss']
})
export class MainPageComponent implements OnInit {
  constructor(public translate: TranslateService) {
    translate.addLangs(['de', 'en']);
    translate.setDefaultLang('en');

    translate.use('en');
   // Here you have to work some more with the code. because it should work f.e. on button click or something :)
  }

  ngOnInit() {}
}

3) In every component you want to translate something you have to use:
<span translate>JUMBOTRON.TITLE</span>
<span>{{ "JUMBOTRON.TITLE" | translate }}</span>
or 
{{'JUMBOTRON.LEAD' | translate: leadNumbers}} -> for string interpolation
then in the component.ts file add:
leadNumbers = {
    jobsNumber: 20466,
    companiesNumber: 20466
  };
  
4) Don't forget to add the translation files in 'frontend/src/assets/i18n/main-page' -> one file for every language:
de.json, en.json etc., like this: 
{
  "NAVBAR": {
  "LOGIN": "Login",
  "REGISTER": "Register"
    
  },
  "JUMBOTRON": {
    "TITLE": "Best swiss job search engine",
    "LEAD": "{{ jobsNumber }} jobs from {{ companiesNumber }} companies",
    "SEARCH_PLACEHOLDER": "Job title, company, location, region ...",
    "SEARCH_BUTTON": "Search",
    "FILTER_BUTTON": "Filter"
  },
   "FOOTER": {
    "SOCIAL_MEDIA_TEXT": "Contact us on social networks!"
  }
}