Sunucuda Http aracılığıyla istenen URL'lerin mutlak olması gerekir. URL: ./assets/i18n/en.json

Question

Angular 2 'de yeniyim ve ngx-translate bileşeninde aşağıdaki soruna sahibim (sunucuda Http ile istenen URL'ler mutlak olmalıdır. URL: ./assets/i18n /en.json). Bu en.json dosyası ben buna http isteği yaptıkça orada olduğundan eminim ve istek İşte

başarır benim app.module.server.ts dosyasıdır: Burada

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

---

ve benim app.module.cleint.ts dosyası edilir:

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

: burada

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

ve benim app.module.shared.ts dosyasıdır

Answer 1

Sorun sadece budur. ./assets/i18n/en.json, http://foo.com/assets/i18n/en.json gibi bir mutlak URL değildir. Genellikle istemci tarafı koduyla aynı sunucudan hizmet verdiğinizi belirtmenin yolları olduğunu biliyorum. o

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

olmayacak Ama açısal docs depolarındakii burnunuzu sokacak zaman olabilir: https://github.com/angular/angular/issues/15349: Bunu görüyoruz. Yani, açısal http hizmeti, belgenin sunulduğu ana bilgisayarı çağırmayı desteklemiyordur. Bu tür gerçekten şaşırtıcı, ancak kullandığınız javascript o alabilirsiniz:

window.location.origin 

Dolayısıyla, sadece prepend Buna/varlıklar/i18n/çağrıyı kurarken.