Angular（Ionic）通用服务器端渲染问题答案

【问题标题】：Angular(Ionic) Universal server side rendering issueAngular（Ionic）通用服务器端渲染问题
【发布时间】：2022-01-13 09:30:50
【问题描述】：

我在 Ionic Angular 应用程序中实现了服务器端渲染。

现在我遇到了这个错误。我什至不确定这个错误来自哪个模块。我尝试将 NgxTranslate 与服务器端渲染一起使用，但出现同样的错误。

您能告诉我如何解决这个问题吗？至少我想知道这个错误来自哪个模块，以便我可以继续调试。

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)

【问题讨论】：

标签： angular ionic-framework server-side-rendering

【解决方案1】：

大多数虚拟主机提供商不允许在 SSR 期间由 Node 将 web 请求发送回同一服务器。您正在构建一个 Ionic 应用程序（可能带有 express 后端，或者可能是 @nguniversal/express-engine 附带的嵌入式 express 服务器），所以我可以想象 express 的行为相同。或许你也可以加个AppModule，看看你怎么称呼TranslateModule.forRoot？

无论如何，我认为对于 Ionic，没有必要使用 TranslateHttpLoader，我认为您现在可以这样做...

您很可能会在您的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 {}

看起来像这样：

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

这对于 SSR 和 CSR 都应该没问题。如果您仍然遇到问题，请尝试查看this repository。请注意，这是一个角度项目，而不是离子项目。

我不得不将AppModule 拆分为AppBrowserModule 并修改main.ts：

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic(providers).bootstrapModule(AppBrowserModule)
  .catch(err => console.error(err));
});

【讨论】：