Question

我正在使用Angular创建.NET Core应用程序。

我在使用ngx-translate工作一段时间后遇到了问题。

我已设法使其部分有效。

回答我以前的问题：

https://github.com/aspnet/Templates/issues/866#issuecomment-326737781

和教程来自：

https://medium.com/letsboot/translate-angular-4-apps-with-ngx-translate-83302fb6c10d

我收到内部服务器错误：

JsonReaderException: Unexpected character encountered while parsing value: {. Path 'errorMessage', line 1, position 17. 
Newtonsoft.Json.JsonTextReader.ReadStringValue(ReadType readType)
Newtonsoft.Json.JsonTextReader.ReadAsString()
Newtonsoft.Json.Serialization.JsonSerializerInternalReader.ReadForType(JsonReader reader, JsonContract contract, bool hasConverter)
Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, string id)
Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, object existingValue)
Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateValueInternal(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, object existingValue)

当我尝试运行应用程序时

我没有对项目进行任何修改。

在app.component中我有：

import { Component } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor(private translate: TranslateService) {
        // this language will be used as a fallback when a translation isn't found in the current language
        translate.setDefaultLang('en');

        // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use('en');
    }

    switchLanguage(language: string) {
        this.translate.use(language);
    }
}

如果我评论这些话：

translate.setDefaultLang('en');
...
translate.use('en');

应用程序启动。然后，如果我取消注释第一行，项目会自动重建，它实际上会进入home组件并替换：

{{ 'Intro' | translate }}

＆＃34;介绍＆＃34;使用en.json文件中的值...所以它有点工作。该问题仅在我运行项目时出现

我的en.json文件：

{
  "HELLO": "hello",
  "Intro": "Hello I am Arthur, I am 42 years old.",
  "Title": "Translation example"
}

我的其他json文件：

{
  "HELLO": "salut",
  "Intro": "Bonjour je m'appelle Arthur, j'ai 42 ans.",
  "Title": "Exemple de traduction"
}

它们都属于wwwroot中的资产/ i18n。

我不打电话给Newtonsoft.Json.JsonTextReader所以，我想ngx-translate在后台会这样做。

我做错了什么？

该项目可在此处找到：

https://github.com/dobrinsky/AngularDefault

Answer 1

我找到了解决方案。我

来自https://github.com/MarkPieszak/aspnetcore-angular2-universal

我知道我们应该加载这样的文件：

export function createTranslateLoader(http: Http, baseHref) {
    // Temporary Azure hack
    if (baseHref === null && typeof window !== 'undefined') {
        baseHref = window.location.origin;
    }
    // i18n files are in `wwwroot/assets/`
    return new TranslateHttpLoader(http, `${baseHref}/assets/i18n/`, '.json');
}

但还不够。我们还需要像这样更改TranslateModule.forRoot：

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

，其中

ORIGIN_URL在另一个档案中：

import { ORIGIN_URL } from "./constansts/baseurl.constants";

像这样：

import { InjectionToken } from '@angular/core';

export const ORIGIN_URL = new InjectionToken<string>('ORIGIN_URL');

我们需要在boot.server.ts中提供ORIGIN_URL，如下所示：

const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
        { provide: ORIGIN_URL, useValue: params.origin }
    ];
Also, in app.module.browser.ts:

export function getOriginUrl() {
    return window.location.origin;
}

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        AppModuleShared
    ],
    providers: [
        {
            // We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
            // (Also remember the Server requires Absolute URLs)
            provide: ORIGIN_URL,
            useFactory: (getOriginUrl)
        },
        {
            provide:
            'BASE_URL', useFactory: getBaseUrl
        }
    ]
})
export class AppModule {
}

这样对我有用......

同样，我的项目可以在这里找到：https://github.com/dobrinsky/AngularDefault

JsonReaderException：解析值ngx-translate时遇到意外的字符

1 个答案: