问题

我正在使用transloco库，并且使用以下函数加载翻译文件。

```typescript
getTranslation(langAndScope: string) {
    return this.http.get<Translation>(`/assets/localization/transloco/${langAndScope}.json`);
}

但这会导致浏览器缓存翻译文件。人们用什么方法来解决这个问题？在最坏的情况下，我认为transloco文件夹可以在构建过程中自动进行版本控制，如果其内容发生更改或使用构建哈希值（使用webpack.ExtendedAPIPlugin()）。但我认为在Angular中很难直接向webpack.config添加插件。

我不想使用这种“hack”。

getTranslation(langAndScope: string) {
    return this.http.get<Translation>(`/assets/localization/transloco/${langAndScope}.json?nocache=${new Date()}`);
}

<details>
<summary>英文:</summary>

I am using transloco library, and to load the translation files, I am using this function.

```typescript
getTranslation(langAndScope: string) {
    return this.http.get&lt;Translation&gt;(`/assets/localization/transloco/${langAndScope}.json`);
}

But this causes the browser to cache the translation files. What are people using to combat this issue? In the worst case scenario, I thought the transloco folder could be automatically versioned in the build process, if it's content is changed or with build hash (using webpack.ExtendedAPIPlugin()). But I think you can't really just add a plugin to webpack.config on angular easily.

I don't want to use this hack

getTranslation(langAndScope: string) {
    return this.http.get<Translation>(`/assets/localization/transloco/${langAndScope}.json?nocache=${new Date()}`);
}

答案1

得分: 0

显然，您可以将JSON文件导入，就像它是一个TypeScript或JavaScript文件一样，而Webpack会在构建过程中将其转换为JS文件。

感谢Netanel Basal

getTranslation(lang: string) {
    return import(`../assets/i18n/${lang}.json`).then(res => res.default);
}

getTranslation(lang: string) {
    return import(`../assets/i18n/${lang}.json`).then(res => res.default);
}