The URLs requested through Http on the server must be absolute. URL: ./ assets / i18n / en.json

Question

I am new to Angular 2, and I have the following problem in the ngx-translate component (URLs requested through Http on the server must be absolute. URL: ./ assets / i18n / en.json). I am sure this en.json file exists when I make an HTTP request and the request completed successfully

Here is my app.module.server.ts file:

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

---

and here is my app.module.cleint.ts file:

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

and here is my app.module.shared.ts file:

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

Answer 1

Well, the only problem is .. / assets / i 18n / en.json is not an absolute URL: http://foo.com/assets/i18n/en.json . I know that there are usually ways to indicate that you are serving from the same server as the client code. Can not be

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

But when I poked into the angular docs repository: I see this: https://github.com/angular/angular/issues/15349 . Therefore, perhaps the angular http service does not support calling the host on which the document was sent. This is really amazing, but you can get it in javascript using:

 window.location.origin 

So just add this option to / assets / i18n / when setting up the call.