Unable to display PrimeNg toasts when switching pages

I'm trying to use the PrimeNg Toasts to confirm the deletion of one user.

Basically, here is my code:

  deleteUser() {
    this.confirmationService.confirm({
      message: this.translateService.instant('common.messages.deletion-confirm'),
      header: this.translateService.instant('common.messages.deletion-title'),
      icon: 'fa-light fa-triangle-exclamation',
      acceptLabel: this.translateService.instant('common.messages.ok'),
      rejectLabel: this.translateService.instant('common.messages.cancel'),
      rejectButtonStyleClass: 'p-button-secondary p-button-text',

      accept: async () => {
        await this.userSettingsService.deleteUser(this.store.selectSnapshot(state => state.userSettings.activeUser.id));
        this.messageService.add({ severity: 'success', summary: 'User deleted', detail: 'User deleted successfully' });
      },
    });
  }

The userSettingsService will call the backend and ask for a route change(to go to the user list) in case of success.

According to my tests, the messageService only tries to display a toast in the current component, if I set a component in a parent component(like my layout component), it is just not displayed.

Since I'm transitioning from my user page to the user list page, I'm not sure how it would be possible to set a <p-toast>. I've tried to put:

one in a parent component
one in the user detail page
one in the user list page
one at each page

But nothing gets displayed. Any idea?

Solution

You can put <p-toast> in app.component.ts.

In another cause, Make sure you provided only single MessageService in app.module.ts.