Angular ngx-translate TranslateLoader ohne http Modul

Compatibility with old browsers, as the Firefox version <= 5 to reach, can you do that angular http Do not use module. The NGX-translate Modules bneötigt a loader, It loads the correct language via AJAX request. Also with the XMLHttpRequest and an Observalbe solve this can:

import {Injectable} from '@angular/core';
import {TranslateLoader} from '@ngx-translate/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class LanguageLoader implements TranslateLoader {

  getTranslation(lang: string): Observable<any> {
    return Observable.create(function (observer) {
    let url = `./assets/i18n/${lang}.json?=` + new Date().getTime();
    let xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE || xhr.readyState == 4) {
              let response = JSON.parse(xhr.responseText);
              observer.next(response);
              observer.complete();
        }
      }
      xhr.open('GET', url, true);
      xhr.send(null);
    });
  }
}

In the app.module.TS can you then embed the loader as follows:

TranslateModule.forRoot({
  loader: {provide: TranslateLoader, useClass: LanguageLoader}
})

Angular 5 URL without index.html

At an angular application you must call by default the index.html, Thus starts the application on an Apache Web server. This also without / index.html with the domain alone only (www.foo.de) funktioneirt, do you set this:

1. Create a .htaccess file in src/.htaccess with the content:

DirectoryIndex index.html

2. Change the base URL in the src/index.html

<base href="">

3. GGF. Add .htaccess to the build process in the .angular cli.json

"apps": [
  {
    "assets": [
      "assets",
      "favicon.ico",
      ".htaccess"
    ],

 

Configure angular German localization

To configure the German language for Fehlermeldugen and also the date format angular from Version2, do one the following set in the app.modules.ts:

...
import { LOCALE_ID} from '@angular/core';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeDe, localeDeExtra);

@NgModule({
 providers: [
 { provide: LOCALE_ID, useValue: 'de' },
 ]
})