Strange behavior

[AdamSGit]

Hi @flauc

Before exposing the problem, thanks a lot for this awesome notification service.

I use it in some app. I send a form in angular 2 component, then when get the response back, notify the error if necessary.

Sometime, but not always, first time I send the form, nothing happend. Second time I submit the form, the two notification show up. (In this situation, my login form trigger this bug but my signup form does not, and it's almost the same code in the two service methods). It's not the first time I see this.

When I say sometime, it's not when you try it several time in a row sometime it work and sometime it doesn't. It's more like if the problem is there in the code, it will happends everytime.

And when this happends, it's happend only when there is no notification. If I send my form twice and the two notifications show up, and re send again, the 3rd notification will show up normally. Then if I wait all the notifications to disappear and try again, the bug come again.

I can give you my code but I didnt found nothing which could help me understand why...

[flauc]

Hey @AdamSGit

Thanks man 👍

Could you please provide some code anyway. I haven't encountered this behavior before and I use the library across a bunch of my projects.

[larsbeck]

Maybe something related: I saw something similar, but not completely random. Whenever a zone rerender happened the queued notifications showed up. My fix currently is that I do a manual zone rerender whenever I show a notification. Probably not the best way to do this, but this fixes it for me.

[papaiatis]

My notifications are popping up in pairs too. When the user submits a form I redirect him to another page, but before I do the redirect, I call the notification service, like this:

this.notificationService.info("Item created", "You have successfully created an item!");
this.router.navigate(['/items']);

Then, though not always, the notification pops up twice. And when I click on any of them, both disappears, so I guess they are the same notification object, but rendered twice.

[papaiatis]

It happened just now that two notifications appeared with the very same content and I did not reload my page and I called the "success" method only once.

[papaiatis]

I can reproduce the issue in my project. What I saw is that in NotificationService object and inside emitter.observers there are two instances of Subscriber. When it is working as expected there is only one instance of that.

Attached two screenshots of the two callstack when you subscribe to the emitter.

FullLayoutComponent is mine. That's where I placed this code:

<nav>...</nav>
<div>
    <router-outlet></router-outlet>
</div>
<simple-notifications [options]="{ position: ['bottom', 'right'], timeOut: 2000 }"></simple-notifications>

I hope it helps!

[niaomingjian]

Hi @flauc
The notification doesn't show at the first time I click the button.
When I click it the second time, the notification shows twice. The sample is simple. I just want to test timeout operator and show the timeout error.
Though the code this.notificationsService.error('error', error.message); in AppComponent has run, the notification doesn't show at the first time. Here is the code.

[cristiancpl]

@niaomingjian It happens exactly the same :( @flauc some update ? thanks !

[Cheickos68]

@flauc Hello, have you found solutions to this double popup problem? thank you in advance for your help

[bukialabi]

Hey guys. I experienced this problem while trying to show a notification in a callback method. The callback was from a 3rd party library (Google Auth API) therefore, outside the Angular zone. As a result, Angular could not detect that a change had happened. You have to force Angular to pay attention to the change.

Here are the steps I followed to solve the problem. See it if works for you:

Import Angular Zone:

import { NgZone } from '@angular/core';
import { NotificationsService } from 'angular2-notifications';

Create a zone instance in your class:

constructor(
      private zone: NgZone, 
      private notification: NotificationsService) {}

Inside whatever function you're experiencing this problem, run your code in the angular zone:

this.zone.run( () =>{ this.notification.warn("Google Auth Failure"); } )

The notification should show up at the right time after you do this.

For more on angular zones, check out the docs here: https://angular.io/api/core/NgZone