Перевод Angular 2 с помощью ngx-translate?

Question

У меня есть все настройки и настройки, следуя инструкциям.

app.module.ts

import {  Http } from '@angular/http';
import {TranslateModule, TranslateStaticLoader, TranslateLoader, TranslateService } from 'ng2-translate';

imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http]
    })
]

Составная часть:

import {TranslateService,TranslatePipe } from 'ng2-translate';

constructor( private activateRoute: ActivatedRoute, public translate: TranslateService) {
    translate.addLangs(['en']);
    translate.setDefaultLang('en');

  }

И просмотреть компонент:

{{ 'Intro' | translate }}

Эта библиотека не работает для меня, она всегда отображает ключ слова Intro вместо перевода значения.

В консоли нет ошибок. Зачем ngx-translate не работает или что я делаю не так.

Answer 1

Если вы все еще используете Angular <4.3, используйте Http из @angular/http с http-loader@0.1.0.

так работает

npm install @ngx-translate/http-loader@0.1.0 --save 

сделал трюк для меня

Источник: https://github.com/ngx-translate/core

Answer 2

Глядя на ваш код, я не могу понять, что не работает. Единственное отличие, которое я заметил, заключается в том, что HttpLoaderFactory предоставлено ngx-translate док. Я предоставлю полную настройку, и вы сможете сравнить ее с вашим кодом, если он поможет обнаружить какие-либо проблемы:)

Настроить:

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

app.module.ts:

// i18n library
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  ...
  imports: [
    ...
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [Http]
      }
    })
  ]

src> assets> i18n> en.json:

{
  "Intro" : "This is intro!"
}

component.ts:

import { TranslateService } from '@ngx-translate/core';

export class Component{

  constructor(translate: TranslateService){
    this.translate.setDefaultLang('en');
  }
}

component.html:

{{ 'Intro' | translate }}