Dynamic Internationalization in Angular 5 (Date and currency)

Question

I met problem with date and currency interpoation in my app. I tried to find out some workaround but I could not for my case. My app works this way: It initialized with en-US locale. After user login data comes where one field is User's Region. This one is setted in local. For this purpose I do:

// app.module
providers: [
...
{
  provide: LOCALE_ID, 
  deps: [LocaleService],
  useFactory: localeProviderFactory
}
...]

export function localeProviderFactory(provider: LocaleService) {
 return provider.getCurrent();
}

//my service
export class LocaleService {
  locale: BehaviorSubject<any>;

  constructor() {
    this.locale = new BehaviorSubject<GroupModel> (this.getGroupFromLocalStorage());
  }

  private getGroupFromLocalStorage(): GroupModel {
    let parse = JSON.parse(localStorage.getItem('currentUser'));
    return parse ? parse.Region : 'en-US';
  }  

  setLocale(val) {
    this.locale.next(val);
  }

  getCurrent() {
    return this.locale.getValue();
  }
}

So after user login I call setLocale() in LocaleService and pass there new User Region.

Problem is that I don't know which region will be setted and i don't want import all locales into app. Angular 5 require all locales imported before app starts. With:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

Is it possible to import/load and register locales dynamicaly in run time? Or is there some workarounds?

score 0 · Answer 1 · answered Mar 29 '18 at 08:29

No, unfortunately it's not possible. As Rob McCabe in his answer to his own question here said:

Angular only works with one language at a time, you have to completely reload the application to change the lang. The JIT support only means that it works with JIT, but you still have to provide the translations at bootstrap because it will replace the text in your templates during the compilation whereas this lib uses bindings, which means that you can change the translations at any time.

Dynamic Internationalization in Angular 5 (Date and currency)

1 Answers1