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

刚在 #122 中找到答案。

在 angular-cli.json 中，您必须在 assets 数组中包含 i18n：

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

即使您的 i18n 目录不在您的 assets 目录中，这仍然有效。

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

Answer 2

我遇到了类似的问题。

在本地一切正常，但在将应用程序部署到 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) 通过编辑 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 3

尝试使用 APP_INITIALIZER:

将默认语言设置为 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 { }

Answer 4

对于遇到 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 5

在我的例子中，我只是改变

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

为了

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

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

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

json language files are not found ngx-translate angular-cli

json

webpack

angular-cli

ngx-translate

angular