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

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) 

當我嘗試運行應用程序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'); 

應用程序啓動。然後，如果我取消了第一線，該項目將自動重建，它實際上在家裏組件出現並取代：

{{ 'Intro' | translate }} 

「介紹」與在en.json文件中的值...所以它種工作。 wwwroot中

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

它們都是資產/國際化：

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

我的其他的JSON文件：這個問題只有當我運行該項目

我en.json文件出現。

我不叫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 { 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