angular - 服务器上通过Http请求的URL必须是绝对的。网址: ./assets/i18n/en.json

我是Angular 2的新手，我在ngx-translate组件中遇到以下问题(服务器上通过Http请求的URL必须是绝对的。URL:./assets/i18n/en.json)。我确定在我向它发出http请求时该en.json文件存在，并且请求成功

这是我的app.module.server.ts文件:

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

这是我的app.module.cleint.ts文件:

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文件:

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

最佳答案

好吧，问题就是这样。 ./assets/i18n/en.json不是一个像http://foo.com/assets/i18n/en.json这样的绝对URL。我知道通常有几种方法可以表明您与客户端代码在同一台服务器上进行服务。可能不是

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

但是，当我在 Angular 文档存储库中四处寻找时:我看到了:https://github.com/angular/angular/issues/15349。因此， Angular http服务可能不支持调用提供文档的主机。这真的很令人惊讶，但是您可以使用以下方法在javascript中获得它:

window.location.origin

因此，在设置调用时，只需将其添加到/assets/i18n/即可。

关于angular - 服务器上通过Http请求的URL必须是绝对的。网址: ./assets/i18n/en.json，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44600108/