找不到json语言文件ngx-translate-angular cli

Question

我的项目是用Angular CLI设置的，所以它是用webpack构建的，但webpack配置文件是隐藏的。

我有两个文件，nl.json和fr.json，但这两个文件都有一个404，尽管它看起来要放在正确的文件夹中：http://localhost:4200/i18n/nl.json。

他们有这样的结构：

{
"SEARCH_PAGE": {
"searchPerson": "Zoek een persoon",
"search": "Zoek"
}
}

在app.module:中

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

和

export function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, "/i18n/", ".json");
}

我还将这些内容包括在我的子模块中，在那里我[尝试]使用翻译，不同之处在于.forChild而不是.forRoot。

在我的组件中：

constructor(translate: TranslateService) {
translate.addLangs(["nl", "fr"]);
translate.setDefaultLang('nl'); // this language will be used as a fallback when a translation isn't found in the current language
let browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/nl|fr/) ? browserLang : 'nl');
}

它可能是与ngx-translate没有关联的东西吗？当我使用管道<h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1>时，屏幕上什么都没有，当我使用指令<h1 translate]="'SEARCH_PAGE.searchPerson'"></h1>时，我得到的是字符串。

Answer 1

我也遇到过类似的问题。

在本地一切都很好，但在将应用程序部署到Azure时，我收到了404个错误。我试图在浏览器中打开/assets/i18n/.json，但也出现了同样的错误。问题是.json文件需要在服务器上配置特殊的MIME类型。

已通过将web.config添加到包中来解决该问题。

1) 在app\src文件夹中创建web.config文件，其正文如下：

<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>

2) 通过edditing angular.json 将此文件包含到包中

projects -> <your project> -> architect -> build -> options -> assets

将src/web.config添加到资产数组

示例：

...
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],

您可以在此处查看更多信息：https://devdays.com/2014/07/21/snippet-using-json-file-on-windows-iis-iis-express/

Answer 2

刚刚在#122中找到了答案。

在angular-cli.json中，必须将i18n包含在assets阵列中：

"apps": [
{
...
"assets": [
"assets",
"favicon.ico",
"i18n"
],
...

即使您的i18n目录不在assets目录中，这也可以工作。

编辑：现在管道和目录都可以工作了。

Answer 3

如果有人遇到类似错误，HttpTranslateLoader无法找到转换json文件，请参阅以下github问题：https://github.com/ngx-translate/core/issues/921

在Angular的较新版本中，拦截器可能会干扰json资产文件的加载。该问题中的方法显示了如何绕过拦截器来处理这样的翻译文件(引用自该问题)：

export function translateHttpLoaderFactory(httpBackend: HttpBackend): TranslateHttpLoader {
return new TranslateHttpLoader(new HttpClient(httpBackend));
}
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
deps: [HttpBackend],
useFactory: translateHttpLoaderFactory
}
}),

Answer 4

在我的情况下，我只是更改

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

对于

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

这只是一个根本问题，所以有时我们应该先检查一下基础知识。

Answer 5

尝试使用APP_INITIALIZER:将默认lang设置为translateService

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterInputService } from './services/router-input.service';
import { Observable } from 'rxjs/Observable';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, '/private/lifeinsurance/assets/', '.json');
}
export function initTranslation(translate: TranslateService) {
return () => {
translate.setDefaultLang('en');
translate.use('en');
return Promise.resolve();
};
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
],
providers: [
{
'provide': APP_INITIALIZER,
'useFactory': initTranslation,
'deps': [TranslateService],
'multi': true
},
RouterInputService
],
bootstrap: [AppComponent]
})
export class AppModule { }