JsonReaderException：解析中に予期しない文字が検出されました。ngx-translate

Question

.NET CoreアプリケーションをAngularで作成しています。

現在、しばらくの間、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) 

Iアプリケーションを実行しようとするn

プロジェクトに変更はありませんでした。 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'); 

アプリケーションが起動します。私は最初の行のコメントを外した場合次に、プロジェクトが自動的に再構築し、それが実際に家庭のコンポーネントに行くと置き換えますen.jsonファイルの値を持つ

{{ 'Intro' | translate }} 

「イントロ」...そう、それは一種の作品。

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

私の他のJSONファイル：私はプロジェクト

マイen.jsonファイルを実行したときにのみ問題が表示されます

を

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

彼らはwwwrootの内、資産/国際化の両方です。

私はNewtonsoft.Json.JsonTextReaderを呼び出さないので、ngx-translateはバックグラウンドでそれを行います。

私は間違っていますか？

プロジェクトは、ここで見つけることができます：

https://github.com/dobrinsky/AngularDefault

Answer 1

私は解決策を見つけました。

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

が、十分ではありません。私たちはこのようなファイルをロードする必要があることを知っていたhttps://github.com/MarkPieszak/aspnetcore-angular2-universal

からI

。 TranslateModuleも変更する必要があります。このようなforRoot：このような

​​

：

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

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

我々はboot.server.tsでORIGIN_URLを提供する必要が

ORIGIN_URLは別のファイルにされ

TranslateModule.forRoot({ 
      loader: { 
       provide: TranslateLoader, 
       useFactory: HttpLoaderFactory, 
       deps: [HttpClient, [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