Angular

api request is calling twice in angular universal

Spread the love

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

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


Spread the love

About Chandra

Technology lover. Professionally Software Developer and write some Technical Blog to help newcomer.
View all posts by Chandra →

2 thoughts on “api request is calling twice in angular universal

Leave a Reply

Your email address will not be published.