jsonReadErexception:解析值NGX-翻译时遇到的意外角色

Question

我正在用Angular制作.NET核心应用程序。

我在制作NGX - 翻译工作一段时间时遇到问题。

我设法使其部分工作。

回答了我以前的问题：

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.com.ponent中我有：

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

应用程序开始。然后，如果我取消注册第一行，则该项目会自动重建，并且实际上将进入家庭组件并替换：

{{ 'Intro' | translate }}

" intro"具有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