Файлы i18n кэшируются в производстве - PullRequest
0 голосов
/ 23 февраля 2019

У меня есть языковая служба для достижения интернационализации в моем приложении.В принципе, он работает нормально в режиме разработки и sometimes в работе.

Моя проблема в том, что sometimes старые версии моих файлов json кэшируются в браузере (если я открою сайт в режиме инкогнито, то всекак и ожидалось).

У меня есть файлы json в каталоге assets/i18n

language.service.ts:

import { HttpBackend, HttpClient } from '@angular/common/http';
import { Injectable, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/internal/Subject';
import { Subscription } from 'rxjs/internal/Subscription';

@Injectable({
  providedIn: 'root'
})
export class LanguageService implements OnDestroy {
  activeLanguage: string = 'ka';
  data: any = {};
  data$: Subject<any>;
  dataSubscription: Subscription = new Subscription();

  constructor(
    private httpClient: HttpClient,
    private httpBackend: HttpBackend
  ) {
    this.data$ = new Subject();
    this.httpClient = new HttpClient(httpBackend);
  }

  loadLanguageFile(lang: string): void {
    if (lang) {
      this.activeLanguage = lang;
    }
    const path = `../assets/i18n/${this.activeLanguage}.json`;
    if (this.data[this.activeLanguage]) {
      this.data$.next(this.data[this.activeLanguage]);
    } else {
      this.dataSubscription = this.httpClient.get(path).subscribe(res => {
        this.data[this.activeLanguage] = res;
        this.data$.next(this.data[this.activeLanguage]);
      });
    }
  }

  ngOnDestroy(): void {
    this.dataSubscription.unsubscribe();
  }
}

language.module.ts:

import { APP_INITIALIZER, NgModule } from '@angular/core';

import { LanguageService } from './language.service';

@NgModule({
  imports: [],
  exports: [],
  declarations: [],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [LanguageService],
      useFactory: (language: LanguageService) => () => {
        return language.loadLanguageFile('ka');
      }
    }
  ]
})
export class LanguageModule {}

translate.pipe.ts:

import { OnDestroy, Pipe, PipeTransform } from '@angular/core';
import { LanguageService } from '@app/core/services/language/language.service';
import { Subscription } from 'rxjs/internal/Subscription';

@Pipe({
  name: 'translate',
  pure: false
})
export class TranslatePipe implements PipeTransform, OnDestroy {
  data: any;
  subscription: Subscription = new Subscription();

  constructor(private languageService: LanguageService) {
    this.subscription = this.languageService.data$.subscribe(res => {
      this.data = res;
    });
  }

  transform(key: string): string {
    this.data = this.languageService.data[this.languageService.activeLanguage];
    return this.data && this.data[key] ? this.data[key] : key;
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

пример использования:

<div>{{ text | translate }}</div>

Что я могу сделать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...