Is it possible to load the JSON translation via the HTTP (not a local static file) ?

[ngx-translate]

Is it possible to load the JSON translation via the HTTP (not a local static file) ?

[DanielSchuech]

I am not sure what you mean with local static file in context of webdevelopment. Every file which wil be used from a setup needs to be delivered via http. The static file loader will send a request for the translation file to

http://yourdomain.com/{{prefix}}/lang{{suffix}}

If you mean you want to load the translation file from another host then this should also be possible. There you would need to include the url of the host into the prefix.

[kbugala]

Thank you Daniel,

I could not get the resource file I wanted because I assumed (without checking it) that I can set the suffix as an empty string.

Have a nice day!

[kbugala]

The module is still trying to get the translation file from http://192.168.2.2:5555/i18n/en.json and that returns 404 despite the fact I specified another location, here is the snippet

var prefix = 'http://192.168.2.2:1234/api/v1/localisation/resources';
var suffix = '.json';
translate.useStaticFilesLoader(prefix, suffix);

any ideas why the prefix is being ignored?

I'm using the latest ng2-translate module - 1.7.3

[ocombe]

Hmm no reason, it should work with this prefix & suffix :-/
Are you sure that you're using the same instance of TranslateService ? You need to define it in bootstrap and never define it in the providers property of a component, otherwise it will create a new instance each time.

[kbugala]

OK, one step closer :)

The app makes 2 requests for the en.js , as follows:
http://192.168.2.2:5555/i18n/en.json - 404
http://192.168.2.2:1234/api/v1/localisation/resources/en.json - 200

I've registered the TranslateService in bootstrap file and then in the root component, as follows:

main.ts

import {provide, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app/components/app.component';
import {TranslateService} from 'ng2-translate/ng2-translate';
import 'rxjs/Rx'; // this would import all RxJS operators


if ('<%= ENV %>' === 'prod') { enableProdMode(); }

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' }),
  HTTP_PROVIDERS,
  TranslateService
]);

app.ts

import {Component, ViewEncapsulation} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
import {TranslateService} from 'ng2-translate/ng2-translate';

@Component({
  selector: 'sd-app',
  moduleId: module.id,
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/',      name: 'Home',  component: HomeComponent  }
])
export class AppComponent {
     constructor(public translate: TranslateService) {

     //set the app language
      var appLang ='en';

    var prefix = 'http://192.168.2.2:1234/api/v1/localisation/resources';
    var suffix = '.json';
    translate.useStaticFilesLoader(prefix, suffix);

     var userLang = navigator.language.split('-')[0]; // use navigator lang if available
        userLang = /(fr|en)/gi.test(userLang) ? userLang : appLang;
        translate.setDefaultLang('en');
        translate.use(userLang);
    }
}

[ocombe]

Yes it looks correct.
I'm gonna try to reproduce it and let you know.

[kbugala]

Hi Olivier

You were right, I had another service which was using it, however I was expecting the TranslateService to be injected from DI because it was already registered in main bootstrap file.

import {Injectable} from 'angular2/core';
import {TranslateService} from 'ng2-translate/ng2-translate';

@Injectable()
export class LanguageService {
  //private languages = ['en', 'fr'];
  private currentLang:string;

  constructor(private translate: TranslateService) {
        if (localStorage.getItem('lang') !== null) {
            this.currentLang = <string>JSON.parse(localStorage.getItem('lang'));
            translate.use(this.currentLang );//transaltion module
            console.log('Reading Lang from the LocalStorage');
        } else {
            //default languages
            this.currentLang= 'en';
            localStorage.setItem('lang', this.currentLang);
            translate.use(this.currentLang );//transaltion module
            console.log('Lang not found in the LocalStorage, setting a default to: en');
        }
  }

  get(): string {
    return this.currentLang;
  }
  set(value: string): void {
    this.currentLang= value;
    //save 
    localStorage.setItem('lang', this.currentLang);
    this.translate.use(value);// I ASSUME THIS LINE IS CREATING ANOTHER INSTANCE OF THE TRANSLATE SERVICE?
    console.log('Saving cart to LocalStorage');
  }
}

Thank you very much for your help!

[ocombe]

Ok good to know !
I should try to find a way to have a global configuration for all instances, because that's probably a problem that other will have