angular - setDefaultLang ngx-translate. Get error Exception: Call to Node module failed with error: "Unexpected token in JSON at position 0"

Question

私はAngularが初めてで、次の特徴を持つ新しいプロジェクトの構築を開始しています。説明が十分に明確でない場合は申し訳ありません。より多くの情報を提供できることを嬉しく思いますが、プロジェクト全体を通して無関係な情報を得たくありません。

私は使用しています

ビジュアルスタジオ 2015
ASPNET コア
AspNetCore.Angular サービス
ngx-翻訳

[ https://github.com/ngx-translate/core][1]で提供されている例と手順に従いました。

私のコードは期待どおりに機能しており、4 つの言語を翻訳し、ルーター内の複数のコンポーネントでパイプディレクティブを使用できます。これは、json ファイルがロードされ、適切に構造化されていることを意味します。json ファイルにエラーがあったという報告をたくさん見ましたが、私の場合はそうではありませんでした。

ただし、私の問題は、デフォルトの言語とコンストラクターで使用される言語を設定する行を追加できないことです。

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')]
})
export class AppComponent {
    constructor(private translate: TranslateService) {

        
        translate.addLangs(["en", "fr", "es", "de"]);
        //Error shows up when uncommenting any of the next two lines
        //translate.setDefaultLang('en');
        //translate.use('en');

    }
}

これらの行のコメントを外すたびに、エラーが発生します

例外: Node モジュールの呼び出しが次のエラーで失敗しました: SyntaxError: Unexpected token in JSON at position 0 at JSON.parse ()

これらの行にコメントすると、アプリケーションは問題なく起動します。詳細は、言語がまだセットアップされていないことだけです。ドロップダウンリストで手動で選択すると、すべてが期待どおりに機能します。

ここにhtmlファイルがあります

<div id="MainContainer" class='container-fluid'>
    <div class='row'>
        <label>
          {{ "SELECT" | translate }}<br />
          <select #langSelect (change)="translate.use(langSelect.value)">
            <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
          </select>
        </label>
    </div>
</div>

ここに私のアプリモジュールがあります

import { NgModule }                 from '@angular/core';
import { UniversalModule }          from 'angular2-universal'; // this automatically imports BrowserModule, HttpModule, and JsonpModule too.
import { Http }                     from '@angular/http';
import { FormsModule }              from '@angular/forms'; // <-- ngModel lives here
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader }      from '@ngx-translate/http-loader';

// main Routing
import { AppRoutingModule }         from './routers/app-routing.module';


// own Services
import { ImgService }               from './services/img.service';

// own components
import { AppComponent }             from './components/app/app.component';
import { NavMenuComponent }         from './components/nav-menu/nav-menu.component';
import { CompleteSystemComponent }  from './components/complete-system/complete-system.component';
import { VehicleComponent }         from './components/vehicle/vehicle.component';
import { RobotComponent }           from './components/robot/robot.component';
import { MapComponent }             from './components/map/map.component';
import { StatusBarComponent }       from './components/status-bar/status-bar.component';
import { RobotCameraComponent }     from './components/robot-camera/robot-camera.component';
import { ImageProcessingComponent } from './components/image-processing/image-processing.component';
import { Station1Component }        from './components/station1/station1.component';
import { Station2Component }        from './components/station2/station2.component';


//AoT requires an exported function for factories
export function HttpLoaderFactory(http: Http) {
    //return new TranslateHttpLoader(http, '/i18n/', '.json');
    //return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
    return new TranslateHttpLoader(http);
}


@NgModule({
    imports: [
        UniversalModule, // must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FormsModule,
        AppRoutingModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        }),

    ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        RobotComponent,
        VehicleComponent,
        CompleteSystemComponent,
        MapComponent,
        StatusBarComponent,
        RobotCameraComponent,
        ImageProcessingComponent,
        Station1Component,
        Station2Component
    ],
    providers: [
        ImgService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

何を試してみるべきかについてのヒントを教えていただければ幸いです。これまでのところ、これらは私が問題を解決しようとしたものです

デフォルト言語の定義を移動し、ngOnInit に使用 (同様に失敗)
デフォルト言語の定義を移動し、ボタンで呼び出される関数に使用 (問題なく動作します)
デフォルト言語の定義を移動して、ngAfterViewInit() および ngAfterViewChecked() に使用してみてください。

問題は、json ファイルが wwwroot ディレクトリからロードされていないか、アプリケーションの起動時にサービスがそれらを見つけられないことだと思われます。アプリケーションを起動すると、問題なくそれらが検出され、すべてが期待どおりに機能します。

コメントをお寄せいただきありがとうございます。この問題のデバッグに役立つ情報があれば教えてください。

angular - setDefaultLang ngx-translate. Get error Exception: Call to Node module failed with error: "Unexpected token in JSON at position 0"

3 に答える 3

Related

Reference