Notifications do not disappear inside lazy loaded module. (libraries like "ng2-toasty" or "angular2-notifications")

Question

I'm trying to use libraries like "ng2-toasty" or "angular2-notifications" inside lazy loaded module in my app (Angular CLI-4.4.6). The documentation for all libraries of this type indicates that I need to import BrowserAnimationModule. But when I import this module (BrowserAnimationModule) into the root module of my application, I get a problem - notifications do not disappear.

When I was looking for a solution of this problem, I found that some developers had the same problem . But they solve it just by importing the BrowserAnimationModule. I can't import BrowserAnimationModule in my businessModule directly, because get an error: "BrowserModule has already been loaded."

I had a thought that my problem is that the BrowserAnimationModule does not work in the lazy-loaded modules, inside of which I use notifications. But I can't find solution of this problem too.

I would be grateful for any help in this matter.

AppModule:

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    CoreModule,    
    NgbModule.forRoot(),   
    appRouting
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    NotificationsService    
  ],
 bootstrap: [AppComponent]
})

app.routing.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

export const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },    
    { path: 'home', loadChildren: './home/home.module#HomeModule' },
    { path: 'business', loadChildren: './business/business.module#BusinessModule' }    
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

businessModule

@NgModule({
  imports: [
    CommonModule,
    FormsModule, 
    ReactiveFormsModule,
    CoreModule,
    BusinessRouting
  ],
  declarations: [ 
    BusinessComponent, 
    HeaderComponent, 
    SidebarComponent, 
    AuthCompanyComponent, 
    LogoutCompanyComponent, 
    LoginCompanyComponent, 
    SignupCompanyComponent, 
    ForgotPasswordCompanyComponent, 
    BidsComponent, 
    ChangePasswordComponent
   ],
  providers: [
    BusinessAuthGuardService,
    DataService,
    BidService,
    NotificationsService
  ]
})
export class BusinessModule { }

UPDATE from 27/10/17

Notifications work correctly, when I call them from basic component (BusinessComponent) of lazy-loaded module (BusinessModule). But inside my lazy-loaded module I have router-outlet, that load other components, that belong to BusinessModule. One of them - BidsComponent. And when I try to call Notification from this component - it doesn't work...

business.router.ts

@NgModule({

    imports: [
        RouterModule.forChild([
            {
              path: '',
              component: BusinessComponent,
              canActivate: [ BusinessAuthGuardService ],               
              children: [
                {
                  path: '',
                  redirectTo: 'bids',
                  pathMatch: 'full'
                },
                {
                  path: 'bids',
                  component: BidsComponent
                }
              ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class BusinessRouting {}

Do you see any error in the console? If you load your business module eagerly (no lazy loading), does it work? — BeetleJuice
It turns out that the problem is not in lazy loading... Maybe in the work BrowserAnimationModule inside submodules... — SudoGrace

SudoGrace SudoGrace · Accepted Answer · 2017-11-06T17:14:49

Today I tried to recreate my example in plunkr, and I saw that the project works correctly there. The problem was in my real application. The component in which I wanted to use notifications expected data from the database. And in my html-template I used the data (variables), which at the time of rendering (split second) was undefined. It's generated an error and apparently blocked adequate notification's service.

The problem has been solved by using *ngIf inside component, which had undefined data. *ngIf helped render the component only when the data set was full. I hope this solution will be useful for someone.

Notifications do not disappear inside lazy loaded module. (libraries like "ng2-toasty" or "angular2-notifications")

1 Answers