CODEWITHSUNDEEP
angularangular-universal
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

Angular: how to language from path in APP_INITIALIZER?

So, we are using APP_INITIALIZER to load some settings (via http) on app load.... but, the problem is that those settings depends on the language path

so mydomain.com/en gets different settings than mydomain.com/it

how can we (safely) determine the language from the app path?

this is the logic we have now

site.service.ts:

load(): Promise<SiteConfiguration> {
  const promise = this.getSiteSettings().toPromise();

  promise.then(config => {
    this.config = config;
     return config;
  }
  return promise;
}

getSiteSettings(): Observable<any> {
  // language logic supposed to be
  const langId = 'en';

  return this.http.get(`${environment.apiPath}/${langId}.siteconfiguration.json`)
  .map(res)
  .catch((error: any) => Observable.throw(error || 'Server error'));
}

assuming the language is always be the first param in the path

Upvotes: 0

Views: 491

Answers (1)

David
David

Reputation: 34435

Assuming you are using express/nodejs in your backend

  1. On the backend server, identify the language id from your express request

    let languageId = req.path.split('/')[1];

  2. On the backend server, provide the language URL

    renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: 'languageId',
        useValue: languageId
      }
    ]

  3. Modify your initializer service to inject the language 

    constructor(private http: HttpClient, @Inject(PLATFORM_ID) private 
platformId: Object, @Optional() @Inject('languageId') protected languageId: string)    
{
}

  4. Use the injected value

      getSiteSettings(): Observable<any> {

    const langId = isPlatformBrowser(this.platformId)? window.location.pathname.split('/')[1] : this.languageId;
    return this.http.get(`${environment.apiPath}/${langId}.siteconfiguration.json`)
    .map(res)
    .catch((error: any) => Observable.throw(error || 'Server error'));
  }

Upvotes: 1

Related Questions