api request is calling twice in angular universal

I faced the problem while loading the app api is calling twice and reloading the app also. I did some changes in some files that are in your angular universal application. Please follow the below step to fix this issue.

Step:1

Add {initialNavigation:’enabled’} to RouterModule.forRoot([appRoutes],{initialNavigation:’enabled’}) in app-routing.module.ts file.

@NgModule({
	imports: [
		RouterModule.forRoot(appRoutes, {
			scrollPositionRestoration: 'top',
			preloadingStrategy: NetworkAwarePreloadModulesStrategy,
			initialNavigation: 'enabled'
		})
	],
	exports: [RouterModule]
})
export class AppRoutingModule {}

Step: 2

TransferHttpCacheModule installs an Http connector that avoids duplicate HttpClient GET requests to a client, with requests already made when the request is delivered to the server side.

Once the module is installed in the Module application, it will capture HttpClient requests on the server and store the response in the TransferState key store. This is forwarded to the client, who then uses it to respond to similar HttpClient requests to the client.

Any applications other than GET will block any other applications. You may use the BrowserTransferStateModule to record your behavior for temporary information.

import { TransferHttpCacheModule } from '@nguniversal/common';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({appId: 'mySSRApp'}),
    TransferHttpCacheModule,
  ],
  bootstrap: [MyApp]
})
export class AppModule() {}

Step: 3

import ServerTransferStateModule in your Server module.

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [AppModule, ServerModule, ServerTransferStateModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Step: 4

Finally, in main.ts change to

document.addEventListener("DOMContentLoaded", () => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

Related articles

• How to deploy angular Universal to production?
• window is not defined in angular universal?
• LocalStorage Is Not Defined In Angular Universal?
• Add angular universal to existing project

Thank you! Like our Facebook page to get more updates interested articles.