首页 文章

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

提问于
浏览
0

我正在使用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 }}

“简介”与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

1 回答

  • 0

    我找到了解决方案 . 一世

    来自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

相关问题