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）通过编辑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

尝试使用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 { }

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');}

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

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

5 个答案: