在 Angular 应用程序中缓存翻译文件 6答案

【问题标题】：Cache translation files in an angular app 6在 Angular 应用程序中缓存翻译文件 6
【发布时间】：2018-12-14 14:41:10
【问题描述】：

我正在尝试在我的 Angular 应用程序中缓存我的翻译文件，因为每个模块的加载量越来越大，我想将这些文件缓存在浏览器缓存存储中，然后每次都能使用它们应用需要它们。

我目前正在使用带有 ngx-translate 的 TranslateHttpLoader 来加载我的文件：

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/home/', '.json');
}

我的 app.module ：

.
.
.
TranslateModule.forChild({
              loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            },
            isolate: true
 }),
.
.
.

任何想法如何实现这一点，非常感谢。

【问题讨论】：

所以浏览器不会缓存这些文件？
显然，是的，我在浏览器的缓存存储中找不到它们，我检查了我的浏览器，我的“缓存存储”和“本地存储”都是空的跨度>
我的意思是通过检查网络流量，浏览器是否向服务器发送实际请求？
是的，浏览器每次都在发送请求。
为什么不能在服务中保存json响应，不存在时才调用？

标签： angular nginx browser-cache ngx-translate

【解决方案1】：

答案来自这个链接： https://github.com/ngx-translate/core/issues/1005。快速修复，每次刷新页面时 ngx-translate 都会加载新的 json 文件。根本没有效率，但简单且有效；） app.module.ts：

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json?v=' + Date.now());
}

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

【讨论】：