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

Question

I am making a .NET Core application with Angular.

I am having problems with making ngx-translate work for a while now.

I have managed to make it partially work.

With the answer to my previous problems from:

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

and tutorial from:

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

I get Internal Server Error:

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)

when I try to run the application

I did no modifications to the project.

In app.component I have:

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

If I comment the lines:

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

The application starts. Then if I uncomment the first line, the project automatically rebuilds and it actually goes in home component and replaces:

{{ 'Intro' | translate }}

"Intro" with the value in the en.json file...so it kind of works. The problem only appears when I run the project

My en.json file:

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

My other json file:

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

They are both in assets/i18n in wwwroot.

I do not call Newtonsoft.Json.JsonTextReader so, I guess ngx-translate does it in the background.

What am I doing wrong?

The project can be found here:

https://github.com/dobrinsky/AngularDefault

Answer 1

I found a solution. I

From https://github.com/MarkPieszak/aspnetcore-angular2-universal

I knew that we should load the files like this:

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

but is not enough. We also need to change the TranslateModule.forRoot like this:

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

where

ORIGIN_URL is in another file:

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

like this:

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

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

we need to provide ORIGIN_URL in boot.server.ts like this:

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 {
}

And like this it works for me...

Again, my project can be found here: https://github.com/dobrinsky/AngularDefault