5

我的项目是使用 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>我得到字面上的字符串。

4

5 回答 5

19

我有类似的问题。

在本地一切正常，但在将应用程序部署到 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 数组

例子：

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

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

于 2018-07-01T06:46:54.653 回答
4

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

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

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

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

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

于 2017-06-26T09:16:42.000 回答
2

对于遇到 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
    }
}),
于 2019-09-23T13:01:29.083 回答
0

尝试使用 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 { }
于 2018-07-30T16:00:33.127 回答
0

就我而言，我只是改变

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

为了

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

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

于 2020-09-10T20:20:31.093 回答