[英]Angular(Ionic) Universal server side rendering issue
I implemented server side rendering in Ionic angular application.我在 Ionic angular 应用程序中实现了服务器端渲染。
And now I'm getting this error.现在我收到了这个错误。 I'm even not sure from which module this error came from.我什至不确定这个错误来自哪个模块。 I tried to use NgxTranslate with server side rendering but same error occurs.我尝试将 NgxTranslate 与服务器端渲染一起使用,但发生了同样的错误。
Could you tell me how to fix this issue?你能告诉我如何解决这个问题吗? At least I want to know from which module where this error came from so that I can continue debugging.至少我想知道这个错误来自哪个模块,以便我可以继续调试。
Error
at XMLHttpRequest.send (/{Project_Folder}/dist/app/server/main.js:184072:19)
at Observable._subscribe (/{Project_Folder}/dist/app/server/main.js:353651:17)
at Observable._trySubscribe (/{Project_Folder}/dist/app/server/main.js:117881:25)
at Observable.subscribe (/{Project_Folder}/dist/app/server/main.js:117867:22)
at scheduleTask (/{Project_Folder}/dist/app/server/main.js:104846:32)
at Observable._subscribe (/{Project_Folder}/dist/app/server/main.js:104884:13)
at Observable._trySubscribe (/{Project_Folder}/dist/app/server/main.js:117881:25)
at Observable.subscribe (/{Project_Folder}/dist/app/server/main.js:117867:22)
at innerSubscribe (/{Project_Folder}/dist/app/server/main.js:393582:23)
at MergeMapSubscriber._innerSub (/{Project_Folder}/dist/app/server/main.js:74448:105)
Most webhosting providers don't allow for webrequests to be sent by Node back to the same server during SSR.大多数虚拟主机提供商不允许在 SSR 期间由 Node 将 web 请求发送回同一服务器。 You're building an Ionic app (probably with a express backend, or maybe the embedded express server that comes with @nguniversal/express-engine
), so I can imagine that express behaves the same.您正在构建一个 Ionic 应用程序(可能带有 express 后端,或者可能是@nguniversal/express-engine
附带的嵌入式 express 服务器),所以我可以想象 express 的行为相同。 Perhaps you can add the AppModule too, so we can see how you call TranslateModule.forRoot
?也许您也可以添加 AppModule,这样我们就可以看到您是如何调用TranslateModule.forRoot
的?
Anyway, I think that for Ionic, it's not necessary to use the TranslateHttpLoader
, which I think you do now...无论如何,我认为对于 Ionic,没有必要使用TranslateHttpLoader
,我认为您现在可以这样做......
Most likely you'll be seated by using a TranslateJsonLoader
in your AppModule
您很可能会在AppModule
中使用TranslateJsonLoader
就座
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { TranslateJsonLoader } from './translate-loaders/translate-json-loader';
@NgModule({
imports: [
...,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: () => {
return new TranslateJsonLoader();
}
}
})
],
bootstrap: [AppComponent],
})
export class AppModule {}
Which looks like this:看起来像这样:
import { TranslateLoader } from '@ngx-translate/core';
import { of } from 'rxjs';
import * as translationEn from '../../assets/i18n/en.json';
import * as translationNl from '../../assets/i18n/nl.json';
export class TranslateJsonLoader implements TranslateLoader {
constructor() {
}
public getTranslation(lang: string) {
switch (lang) {
case 'nl': {
return of(translationNl);
} break;
default: {
return of(translationEn);
} break;
}
}
}
This should be fine for both SSR as CSR.这对于 SSR 和 CSR 都应该没问题。 In case you still run into problems, try and take a look at this repository .如果您仍然遇到问题,请尝试查看此存储库。 Note that this is an angular project, not ionic.请注意,这是一个 angular 项目,而不是离子项目。
I had to split up my AppModule
in an AppBrowserModule
and modify the main.ts
:我不得不在AppModule
中拆分我的main.ts
AppBrowserModule
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic(providers).bootstrapModule(AppBrowserModule)
.catch(err => console.error(err));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.