サーバー上でHttp経由で要求されたURLは絶対パスでなければなりません。 URL：./assets/i18n/en.json

Question

Angular 2が新しく、ngx-translateコンポーネントで次の問題が発生します（サーバー上でHttp経由で要求されたURLは絶対パスでなければなりません）URL：./assets/i18n /en.json）。

import { NgModule } from '@angular/core'; 
import { ServerModule } from '@angular/platform-server'; 
import { sharedConfig } from './app.module.shared'; 
import { HttpModule, Http } from '@angular/http'; 
import { 
    TranslateModule, 
    TranslateLoader, 
    MissingTranslationHandler, 
    MissingTranslationHandlerParams 
} from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 

export function createTranslateLoader(http: Http) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

export class MyMissingTranslationHandler implements MissingTranslationHandler { 
    handle(params: MissingTranslationHandlerParams) { 
     return '[' + params.key + ']'; 
    } 
} 

@NgModule({ 
    bootstrap: sharedConfig.bootstrap, 
    declarations: sharedConfig.declarations, 
    imports: [ 
     ServerModule, 
     HttpModule, 
     TranslateModule.forRoot({ 
      loader: { 
       provide: TranslateLoader, 
       useFactory: (createTranslateLoader), 
       deps: [Http] 
      } 
     }), 
     ...sharedConfig.imports 
    ] 
}) 
export class AppModule { 
} 

---

、ここで：私は、私はそれに対してHTTP要求を行うと、要求はここ

を成功私app.module.server.tsファイルであるとして、このen.jsonファイルがあることを確信しています私app.module.cleint.tsはファイルです：

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { HttpModule, Http } from "@angular/http"; 
import { BrowserModule } from "@angular/platform-browser"; 

import { TranslateModule} from '@ngx-translate/core'; 

import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { EmployeesListComponent } from './components/employees/EmployeesList.component'; 
import { CounterComponent } from './components/counter/counter.component'; 

export const sharedConfig: NgModule = { 
    bootstrap: [AppComponent], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     EmployeesListComponent, 
     HomeComponent 
    ], 
    imports: [ 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'fetch-data', component: FetchDataComponent }, 
      { path: 'employees-list', component: EmployeesListComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]), 
     BrowserModule, 
     HttpModule,TranslateModule 
    ] 
    , exports: [ 
     TranslateModule 
    ] 
}; 

：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule,Http } from '@angular/http'; 
import { sharedConfig } from './app.module.shared'; 
import { 
    TranslateModule, 
    TranslateLoader, 
    MissingTranslationHandler, 
    MissingTranslationHandlerParams 
} from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
export function createTranslateLoader(http: Http) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

export class MyMissingTranslationHandler implements MissingTranslationHandler { 
    handle(params: MissingTranslationHandlerParams) { 
     return '[' + params.key + ']'; 
    } 
} 

@NgModule({ 
    bootstrap: sharedConfig.bootstrap, 
    declarations: sharedConfig.declarations, 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     TranslateModule.forRoot({ 
      loader: { 
       provide: TranslateLoader, 
       useFactory: (createTranslateLoader), 
       deps: [Http] 
      } 
     }), 
     ...sharedConfig.imports 
    ], 
    providers: [ 
     { provide: 'ORIGIN_URL', useValue: location.origin }, 
     { 
      provide: MissingTranslationHandler, 
      useClass: MyMissingTranslationHandler 
     } 
    ] 
}) 
export class AppModule { 
} 

、ここでは私app.module.shared.tsファイルです

Answer 1

問題はこれだけです。 ./assets/i18n/en.jsonは絶対URLではありません：http://foo.com/assets/i18n/en.json。私はあなたがクライアント側のコードと同じサーバーから提供していることを示す方法が通常あることを知っています。私は、角ドキュメントレポでつつくときには

export function createTranslateLoader(http: Http) { 
    return new TranslateHttpLoader(http, '/assets/i18n/', '.json'); 
} 

ことしかしない可能性があります：https://github.com/angular/angular/issues/15349：私はこれを参照してください。だから、角度HTTPサービスは、ドキュメントが提供されたホストの呼び出しをサポートしていない可能性があります。それは一種の本当に驚くべきことであるが、あなたは使ってJavaScriptでそれを取得することができます：

window.location.origin 

は、だから、あなたが通話を設定する/資産/国際化/ことを先頭に追加しました。