How to use without files?

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 ]

[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>

[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'
      });
    }
  }
}