我是Angular 2的新手,我在ngx-translate组件中遇到以下问题(通过服务器上的Http请求的URL必须是绝对的。)URL:./assets/i18n /en.json)。我相信,这en.json文件是存在的,因为我做HTTP请求,并请求成功通过服务器上的Http请求的URL必须是绝对的。 URL:./assets/i18n/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
]
};
2017-06-17
Mohammad
+0
请阅读[在什么情况下,我可以添加“紧急”或其他类似的短语到我的问题,以获得更快的答案?](/ meta.stackoverflow.com/q/326569) - 总结是,这不是解决志愿者问题的理想方式,而且可能对获得答案起反作用。请不要将这添加到您的问题。 –