CODEWITHSUNDEEP
angularionic-frameworkserver-side-rendering
Ioan Moldovan
Ioan Moldovan

Reputation: 2422

Angular(Ionic) Universal server side rendering issue

I implemented server side rendering in Ionic angular application.

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.

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)

Upvotes: 0

Views: 241

Answers (1)

Pieterjan
Pieterjan

Reputation: 3581

Most webhosting providers don't allow for webrequests to be sent by Node back to the same server during SSR. 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. Perhaps you can add the AppModule too, so we can see how you call TranslateModule.forRoot?

Anyway, I think that for Ionic, it's not necessary to use the TranslateHttpLoader, which I think you do now...

Most likely you'll be seated by using a TranslateJsonLoader in your AppModule

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. In case you still run into problems, try and take a look at this repository. Note that this is an angular project, not ionic.

I had to split up my AppModule in an AppBrowserModule and modify the main.ts:

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

Upvotes: 1

Related Questions