Provider initialized twice

Ionic Framework ionic-v3
1

I recently converted my Ionic 2 app to Ionic 3 implementing lazy loading for my pages. Other than adding modules for each page, I did not modify the code/logic.

Now I am running into an issue where I have a basic feedback form occasionally submitting twice to my API service backend. It does not happen every time but definitely more frequently when running on a device vs the browser. After adding logging, I noticed my feedback provider that handles the API Post is initializing twice when the feedback page is opened.

I’ve tried moving the provider to be declared in the app module as well as within the page module to see if the lazy loading was causing an issue but no luck.

import { NgModule } from ‘@angular/core’;
import { IonicPageModule } from ‘ionic-angular’;
import { FeedbackPage } from ‘./feedback’;
import { FeedbackProvider } from ‘@providers/feedback/feedback’;

@NgModule({
declarations: [
FeedbackPage,
],
imports: [
IonicPageModule.forChild(FeedbackPage),
],
providers: [
FeedbackProvider
]
})
export class FeedbackPageModule {}

I
I then import the provider in the page:

// Providers
import { FeedbackProvider } from ‘@providers/feedback/feedback’;
import { LogProvider } from ‘@providers/log/log’;

@IonicPage()
@Component({
selector: ‘page-feedback’,
templateUrl: ‘feedback.html’,
})
export class FeedbackPage {
…

sendFeedback(){
   this.feedbackProvider.postFeedback(this.feedback.controls.name.value, this.feedback.controls.contactInfo.value, this.feedback.controls.message.value);
}

}

All this results in my provider logging that it’s constructor is called twice and I’m getting duplicate API calls to my Feedback POST endpoint.

Any thoughts? Thanks.

2

I don’t understand the source of your problem yet, but I know this isn’t the fix. If you have a module that contains providers, import the module into app.module.ts with a static forRoot() function that returns a ModuleWithProviders, so Angular knows to register the provider. You can lazy load the other parts of your module again later.

Edit: Like this. I’m not sure where I found this in the Angular docs, but it’s there.

3

After further research, I’ve discovered it’s not related to the provider at all. It appears whenever I make a POST to the server, it’s making two calls. So I still have a problem but it’s not an issue of the provider getting initialized twice.

Disregard this thread…

4

That sounds like CORS to me. It’ll send an initial OPTIONS request before sending your actual request.

5

Ya, I noticed that. My problem is that my API endpoint is retrieving/processing the request twice. I was under the impression the OPTIONS request didn’t contain a payload and IIS would handle it. Instead the API controller endpoint is actually processing the call twice so it must have a payload with it or it’s some other issue.

6

I do this, to solve.

1- Create a blank page with nothing inside, only a blank page
ionic generate page Blank

2 - I remove the header in the html, it is really a blank page.

2- Add it to the file src/app/app.module.ts normally. Like another pages.

3- In src/app/app.component.ts I declare rootPage: any = BlankPage; and inside constructor I do this:

this.storage.get(‘hasSeenTutorial’)
.then((hasSeenTutorial) => {
if (hasSeenTutorial) {
this.rootPage = TabsPage;
} else {
this.rootPage = TutorialPage;
}
this.platformReady()
});

I declare rootPage and shortly thereafter it is changed. The blank page pops up and is changed.

No more loading twice.

7

This is a real long shot on an old thread, but if anybody actually does come across the same problem OP had (not the preceding post, which is totally unrelated), if you subscribe to HTTP calls in multiple places, this can cause the underlying request to be resubmitted on each subscription. I think this is caused by HttpClient dealing in cold observables, and it bit me when I was trying to watch upload progress. What worked for me was to add share to the end of the pipeline of the process generating the HTTP request.

8

I’m with the same problem with httpClient POST. I try share, publish().refCount() e yet execute for tree times.

Seems something initialize in app.module but i cant see.

Someone can helpme?

9

My problem is a Module registered for two others pages, this other pages use the same service. I remove page Module and works fine now.

Obs.: Share(), publish().refCount(), CORS… nothing works.

10

Can you please explain/show how this " add share to the end of the pipeline" is used I am doing few simple API or local assets HTTPClient.get() requests and later subscribing to the Observable they return.

Your comment caught my attention, as I am now facing duplicate constructor calls to components (not services) that should be only created once, like ones rooted on the tab pages.
I am not using lazy loading.
Thank you.

11 
constructor(private http: HttpClient) {}
afo(): Observable<Foo> {
  return this.http.get("/afo");
}
bfo(): Observable<Foo> {
  return this.http.get("/bfo").pipe(share());
}

Both afo and bfo return a very similar-looking Observable from the outside world, but a new HTTP request will be fired every time you subscribe to the one coming back from afo. This is not true for bfo: a single call to bfo generates one HTTP request, no matter how many places you subscribe to it.