Angular Internationalization

export abstract class Resources {
    public static RightToLeft = 'ltr';

    public static DateIs: string = null;
    public static FirstName: string = null;
    public static LastName: string = null;
    public static Age: string = null;
    public static AgeRange: string = null;
    public static AgeRequired: string = null;
    public static Create: string = null;
    public static FirstNameLong: string = null;
    public static FirstNameRequired: string = null;
    public static LastNameLong: string = null;
    public static LastNameRequired: string = null;
}

export abstract class LocaleHelper {
    public static defaultLocaleId = 'en-US';
    public static implementedLocales = ['ar', 'es', LocaleHelper.defaultLocaleId];


    public static setCurrentLocale(localeId: string) {
        localStorage.setItem('__localeId', localeId);
    }

    public static isDefaultLocaleSet(): boolean {
        return LocaleHelper.getCurrentLocale() === this.defaultLocaleId;
    }

    public static getCurrentLocale(): string {
        // Retrieve localeId from `localStorage` if any; otherwise, default to 'en-US'.
        // The first time the app loads, check the browser language.
        const storedLocaleId = <string>localStorage.getItem('__localeId');
        if (storedLocaleId == null) {
            let partialLocaleMatch = null;
            // tslint:disable-next-line:forin
            for (const id in LocaleHelper.implementedLocales) {
                const implemetedLocaleId = LocaleHelper.implementedLocales[id];
                if (navigator.language === implemetedLocaleId) {
                    // Exact match, return.
                    return implemetedLocaleId;
                } else if (navigator.language.startsWith(implemetedLocaleId)) {
                    // For example, browser has `es-CL` and the implemented locale is `es`.
                    partialLocaleMatch = implemetedLocaleId;
                } else if (implemetedLocaleId.startsWith(navigator.language)) {
                    // For example, browser has `es` and the implemented locale is `es-CL`.
                    partialLocaleMatch = implemetedLocaleId;
                }
            }
            if (partialLocaleMatch != null) { return partialLocaleMatch; }
        }
        return storedLocaleId || this.defaultLocaleId;
    }
}

providers: [{
    provide: LOCALE_ID, useFactory: () => LocaleHelper.getCurrentLocale()
  }],

export class AppModule {
  constructor() {
    // Pre-load all the needed locales.
    registerLocaleData(localeEs, 'es', localeEsExtra);
    registerLocaleData(localeAr, 'ar', localeArExtra);

    // There are other ways to loads a module dynamically.
    import( `../assets/resources.${LocaleHelper.getCurrentLocale().toLowerCase()}.js`).then((r) => {

      // Load `Resources` with values.
      for (const key in r.resources) {
        if (r.resources.hasOwnProperty(key)) {
          Resources[key] = r.resources[key];
        }
      }

      // Is the current language right to left?
      document.documentElement.dir = Resources.RightToLeft;
    });
  }
}

export class LocalizedComponent {
    public resources = Resources;
    public localeId: string = null;

    constructor() {
        this.localeId = LocaleHelper.getCurrentLocale();
      }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent extends LocalizedComponent {
  public now = Date.now();

  public firstName: string = null;

  // Implemented languages
  public languages: Language[] = [{ name: 'English', localeId: 'en-US' },
                                  { name: 'Español', localeId: 'es' },
                                  { name: 'العربية', localeId: 'ar' }];
  profileForm: FormGroup;

  constructor() {
    super();

    this.profileForm  = new FormGroup({
      'firstName': new FormControl('', [
        Validators.required,
        Validators.maxLength(50)
      ]),
      'lastName': new FormControl('', [
        Validators.required,
        Validators.maxLength(50)
      ]),
      'age': new FormControl('', [
        Validators.required,
        Validators.max(130),
        Validators.min(10)
      ])
    });
  }

  public createClicked($event): void {
    Object.keys(this.profileForm.controls).forEach(field => {
      const control = this.profileForm.get(field);
      control.markAsTouched({ onlySelf: true });
    });
  }

  public languageSelected($event, language: Language): void {
    // Set the new language.
    LocaleHelper.setCurrentLocale(language.localeId);

    // Reload page.
    window.location.reload();
  }
}

interface Language {
  name: string;
  localeId: string;
}

const appRoutes: Routes = [
  { path: 'profile', component: ProfileComponent },
  { path: '',  redirectTo: 'profile', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },

];

export abstract class LocaleHelper {
    public static defaultLocaleId = 'en-US';
    public static implementedLocales = ['ar', 'es', LocaleHelper.defaultLocaleId];


    public static setCurrentLocale(localeId: string) {
        // Set the new locale. Assume localeId is valid.
        const urlLocaleId = LocaleHelper.getCultureFromCurrentUrl();
        if (urlLocaleId) {
            // Replace current locale in url if any.
            if (localeId !== LocaleHelper.defaultLocaleId) {
                window.location.href = window.location.href.replace(`/${urlLocaleId}/`, `/${localeId.toLowerCase()}/`);
            } else {
                window.location.href = window.location.href.replace(`/${urlLocaleId}/`, '/');
            }

        } else {
            // If there is no locale in the url, add one.
            // Do not add one if it is the default locale.
            if (localeId !== LocaleHelper.defaultLocaleId) {
                const newUrl = window.location.href.replace(window.location.pathname,  `/${localeId}` + window.location.pathname);
                if (newUrl !== window.location.href) {
                    window.location.href = newUrl;
                }
            }
        }
    }

    public static isDefaultLocaleSet(): boolean {
        return LocaleHelper.getCurrentLocale() === this.defaultLocaleId;
    }

    private static getCultureFromCurrentUrl(): string {
        // Retrieve localeId from the url if any.
        const matches = window.location.pathname.match(/^\/[a-z]{2}(\-[a-z]{2})?\//gi);
        let urlLocaleId = null;
        if (matches) {
            urlLocaleId = matches[0].replace(/\//gi, '');
        }
        return urlLocaleId;
    }

    public static getCurrentLocale(): string {
        // Retrieve localeId from the url if any; otherwise, default to 'en-US'.
        // The first time the app loads, check the browser language.
        const storedLocaleId = LocaleHelper.getCultureFromCurrentUrl();
        if (storedLocaleId == null) {
            let partialLocaleMatch = null;
            // tslint:disable-next-line:forin
            for (const id in LocaleHelper.implementedLocales) {
                const implemetedLocaleId = LocaleHelper.implementedLocales[id];
                if (navigator.language === implemetedLocaleId) {
                    // Exact match, return.
                    return implemetedLocaleId;
                } else if (navigator.language.startsWith(implemetedLocaleId)) {
                    // For example, browser has `es-CL` and the implemented locale is `es`.
                    partialLocaleMatch = implemetedLocaleId;
                } else if (implemetedLocaleId.startsWith(navigator.language)) {
                    // For example, browser has `es` and the implemented locale is `es-CL`.
                    partialLocaleMatch = implemetedLocaleId;
                }
            }
            if (partialLocaleMatch != null) { return partialLocaleMatch; }
        }
        return storedLocaleId || this.defaultLocaleId;
    }
}

provide: APP_BASE_HREF, useFactory: () => {
      // Suppress the default locale from the url
      return LocaleHelper.isDefaultLocaleSet() ? '/' :  `/${LocaleHelper.getCurrentLocale()}/`;
    }