[英]json language files are not found ngx-translate angular-cli
My project is set up with Angular CLI, so it's built with webpack but the webpack config files are hidden.我的项目是用 Angular CLI 设置的,所以它是用 webpack 构建的,但 webpack 配置文件是隐藏的。
I got two files, nl.json
and fr.json
, but get a 404
for both, even though it looks like it's going to the correct folder: http://localhost:4200/i18n/nl.json
.我得到了两个文件,
nl.json
和fr.json
,但两者都得到了404
,即使它看起来像是去正确的文件夹: http://localhost:4200/i18n/nl.json
。
They have this structure:他们有这样的结构:
{
"SEARCH_PAGE": {
"searchPerson": "Zoek een persoon",
"search": "Zoek"
}
}
In app.module
:在
app.module
:
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [Http]
}
}),
...
and和
export function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, "/i18n/", ".json");
}
I also include these in my sub module where I [try to] use the translation, with the difference of .forChild
instead of .forRoot
.我还将这些包含在我[尝试]使用翻译的子模块中,区别在于
.forChild
而不是.forRoot
。
In my component:在我的组件中:
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');
}
Could it be something not linked to ngx-translate
?它可能与
ngx-translate
吗? When I use the pipe <h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1>
当我使用管道
<h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1>
<h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1>
I get nothing on the screen, when I use the directive <h1 translate]="'SEARCH_PAGE.searchPerson'"></h1>
I get literally the string. <h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1>
我在屏幕上什么也没有,当我使用指令<h1 translate]="'SEARCH_PAGE.searchPerson'"></h1>
我得到字面上的字符串。
I had similar problem.我有类似的问题。
Everything worked fine locally but I was getting 404 errors when deployed app to Azure.本地一切正常,但在将应用程序部署到 Azure 时出现 404 错误。 I tried to open /assets/i18n/.json in my browser and got the same error.
我试图在浏览器中打开 /assets/i18n/.json 并得到同样的错误。 The issue was that .json files requred special MIME type configured on server.
问题是 .json 文件需要在服务器上配置的特殊 MIME 类型。
The problem was resolved by adding web.config to the package.通过向包中添加 web.config 解决了该问题。
1) create web.config file in app\\src folder with following body: 1) 在 app\\src 文件夹中创建 web.config 文件,内容如下:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
2) Include this file to the package by edditing angular.json 2) 通过编辑 angular.json 将此文件包含在包中
projects -> <your project> -> architect -> build -> options -> assets
Add src/web.config to the assets array将 src/web.config 添加到资产数组
Example:示例:
...
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],
You can see more info here: https://devdays.com/2014/07/21/snippet-using-json-file-on-windows-iis-iis-express/您可以在此处查看更多信息: https : //devdays.com/2014/07/21/snippet-using-json-file-on-windows-iis-iis-express/
Just found the answer in #122 .刚刚在#122 中找到了答案。
In angular-cli.json
you have to include i18n
in the assets
array:在
angular-cli.json
您必须在assets
数组中包含i18n
:
"apps": [
{
...
"assets": [
"assets",
"favicon.ico",
"i18n"
],
...
This works even if your i18n
directory is not inside your assets
directory.即使您的
i18n
目录不在您的assets
目录中,这也有效。
EDIT: and now both the pipe and the directory work.编辑:现在管道和目录都可以工作。
For anyone encountering a similar error where translation json files cannot be found by the HttpTranslateLoader, please see the following github issue: https://github.com/ngx-translate/core/issues/921对于任何遇到 HttpTranslateLoader 找不到翻译 json 文件的类似错误的人,请参阅以下 github 问题: https : //github.com/ngx-translate/core/issues/921
In newer versions of Angular, Interceptors can interfere with the loading of the json asset files.在较新版本的 Angular 中,拦截器会干扰 json 资产文件的加载。 The approach in the issue shows how to bypass interceptors for the translation files like this (quoted from the issue):
问题中的方法展示了如何绕过这样的翻译文件的拦截器(引用自问题):
export function translateHttpLoaderFactory(httpBackend: HttpBackend): TranslateHttpLoader {
return new TranslateHttpLoader(new HttpClient(httpBackend));
}
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
deps: [HttpBackend],
useFactory: translateHttpLoaderFactory
}
}),
Try to hoot default lang to translateService using APP_INITIALIZER:尝试使用 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 { }
In my case I just change就我而言,我只是改变
export function HttpLoaderFactory(http: HttpClient){
return new TranslateHttpLoader(http, './assets/i18n/', '.json');}
For对于
export function HttpLoaderFactory(http: HttpClient){
return new TranslateHttpLoader(http, '../../assets/i18n/', '.json');}
it was only a rooting problem, so sometimes we should check the basics first.这只是一个root问题,所以有时我们应该先检查一下基础知识。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.