Пользовательский загрузчик ngx-translate, получающий не может установить свойство 'http' из неопределенного - PullRequest
Новая
       27

Пользовательский загрузчик ngx-translate, получающий не может установить свойство 'http' из неопределенного

1 голос
/ 12 июля 2019

Я настраиваю проект Ionic 4 с использованием ngx-translate и пользовательского загрузчика для загрузки переводов JSON из внешнего домена.Я следил за этим, ребята, взялись за это: https://forum.ionicframework.com/t/ngx-translate-translatehttploader-with-external-url/99331/4

Stackblitz link: https://stackblitz.com/edit/ionic-v4-jdfbh6

Так что это мой пользовательский загрузчик (провайдер). 

@Injectable()
export class TranslationProvider implements TranslateLoader {
  constructor(private http: HttpClient) {
    console.log('Hello TranslationProvider Provider');
  }

  getTranslation(lang: string): Observable<any> {
    return Observable.create(observer => {
      this.http.get<any>(Environment.base_api + '/static/translations/' + lang + 'json', {
      headers: {'Content-Type': 'application/json'}}).subscribe((res: Response) => {
        observer.next(res.json());
        observer.complete();
      });
    });
  }
}

и в моем app.module.ts (импорт): 

imports: [
  BrowserModule,
  IonicModule.forRoot(App),
  IonicStorageModule.forRoot(),
  HttpClientModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: (TranslationProvider),
      deps: [HttpClient]
    }
  })
],

Полученное сообщение об ошибке:

TypeError: Cannot set property 'http' of undefined at TranslationProvider (http://localhost:8100/build/main.js:1073:19)

1 Ответ

0 голосов
/ 12 июля 2019

Я сделал рабочий пример приложения, вот суть: https://gist.github.com/olivercodes/a34be66e5b69edcd96038e5a4518b16e

Вам нужно изменить @Injectable () на 

@Injectable({
  providedIn: 'root'
})

Кроме того, убедитесь, что это ваши места импорта: 

// In the service file
import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core'

// in app.module
import { TranslateLoader } from '@ngx-translate/core'
import { HttpClient, HttpClientModule } from '@angular/common/http';

Воспользуйтесь моим предложением и убедитесь, что ваш импорт правильный.

...