Core: How to use without files?

[ShlomoRosenheimer]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

I do not want to use files to store my translations, rather load from an api and use translate.setTranslation() to add them later.

What I did:

added to app.module.ts

     imports: [ ... TranslateModule.forRoot(), ... ]

added to app.component.ts

    this.translate.setDefaultLang('en');
   this.translate.setTranslation('en', {abc: 123});

However when I run the app, the console says:
GET http://127.0.0.1:6300/i18n/en.json 404 (Not Found) zone.js:1805

Whats the problem?

Please tell us about your environment:

• "@ngx-translate/core": "^6.0.0",

• "@angular/core": "^2.4.9",

• Browser: [all ]

[kamok]

You need to configure a custom TranslationLoader.

Then, provide it instead of the standard StaticLoader.

Ex:

TranslateModule.forRoot({
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [Http]
        })

  export function createTranslateLoader(http: Http): TranslationLoaderService {
    return new TranslationLoaderService(http);
  }

Here's an example of how you can do it for the service:

import { Http }                                     from '@angular/http';
import { TranslateModule, TranslateLoader,
         TranslateStaticLoader }                    from 'ng2-translate/ng2-translate';
import { Observable }                               from 'rxjs/Observable';
// import 'rxjs/add/operator/map';

export class TranslationLoaderService implements TranslateLoader {

  constructor(private http: Http) {
  }

  getTranslation(lang: string): Observable<any> {
    if (lang === 'en') {
      return Observable.of({
        HELLO: 'Hi there'
      });
    }else {
      return Observable.of({
        HELLO: 'Hola'
      });
    }
  }
}

This really isn't an issue. Please read the docs more. This should be more than enough for you to get started.

[ShlomoRosenheimer]

Thanks. Even if I remove the static loading, and use TranslateHttpLoader it is still requesting
http://127.0.0.1:6300/assets/i18n/en.json 404 (Not Found) zone.js

[ocombe]

By default there is no loader (it's just a function that returns nothing), if you don't add any loader, you can just use setTranslations like you want.
I don't know how it could make an http request without the loader since it doesn't even import Http.
Make sure that you don't define any loader and it should be ok.

Here is the loader that it uses by default: https://github.com/ngx-translate/core/blob/master/src/translate.loader.ts#L12-L16

[SamVerschueren]

That's the thing, don't use the TranslateHttpLoader because as the name implies, it's loading over Http.

Use the loader defined by @kamok and return the data that you want.

export class TranslationLoaderService implements TranslateLoader {

  constructor(private http: Http) {
  }

  getTranslation(lang: string): Observable<any> {
    if (lang === 'en') {
      return Observable.of({
        HELLO: 'Hi there'
      });
    }else {
      return Observable.of({
        HELLO: 'Hola'
      });
    }
  }
}

[ShlomoRosenheimer]

Thank you very much everybody. After removing the loader completely it works as expected.

I also updated
"@ngx-translate/core": "^6.0.0",
"zone.js": "^0.8.5"

[whyboris]

Thank you for this question and resolution. I wanted to include my translations as part of the application (not loaded over HTTP) so I implemented things thus:

Module:

imports: [ ... TranslateModule.forRoot(), ... ]

en.ts:

export const English = {
  HOME: {
    TITLE: 'Hello in English!',
  }
};

Component:

import { English } from '../../i18n/en';
...
    this.translate.setDefaultLang('en');
    this.translate.use('en');
    this.translate.setTranslation('en', English );

Template:

  <span>{{ 'HOME.TITLE' | translate }}</span>