0

I have implemented the notification bar, using the steps mentioned in this ngx-notification-bar documentation

In the app.component.ts file, the following part of the code is there

this.notificationBarService.create({ message: '<b>Free Shipping </b>', type: NotificationType.Info, allowClose: true, autoHide: false, hideOnHover: false, isHtml: true });

In the app.component.html file, the following part of the code is there

<notification-bar
  [ngStyle]="{ height: '3px', background: 'white' }"
></notification-bar>

I am able to see the notification bar on my page. But when I am going to any other page (or component) from the app.component.html page, I am getting this below error in the console and the components are not loading, rather a blank screen is there

core.js:6228 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'unsubscribe')
TypeError: Cannot read properties of undefined (reading 'unsubscribe')
    at NotificationBarComponent.ngOnDestroy (ngx-notification-bar.js:165)
    at executeOnDestroys (core.js:14405)
    at cleanUpView (core.js:14304)
    at destroyViewTree (core.js:14073)
    at destroyLView (core.js:14255)
    at RootViewRef.destroy (core.js:15120)
    at ComponentRef$1.destroy (core.js:34191)
    at RouterOutlet.deactivate (router.js:9122)
    at ActivateRoutes.deactivateRouteAndOutlet (router.js:4023)
    at ActivateRoutes.deactivateRouteAndItsChildren (router.js:3981)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

As far as I can understand, it is related to not calling ngOnDestroy(). Can anyone please help me resolve this issue ?

ESCoder
  • 15,431
  • 2
  • 19
  • 42
  • in what lifecycle step do you call `this.notificationBarService.create` – Timon Oct 11 '21 at 09:52
  • @Timon I am calling this service in `ngOnInit(): void { this.notificationBarService.create({ message: 'Free Shipping ', type: NotificationType.Info, allowClose: true, autoHide: false, hideOnHover: false, isHtml: true }); }` – ESCoder Oct 11 '21 at 09:56
  • I think it's a library issue. `NotificationBarComponent` component is in the library. – navnath Oct 11 '21 at 10:04
  • @navnath yes, its in the library. But how can I solve this error, as because of this my other components are not functioning – ESCoder Oct 11 '21 at 10:05
  • https://stackoverflow.com/questions/13300137/how-to-edit-a-node-module-installed-via-npm – navnath Oct 11 '21 at 10:24
  • It's not a good solution but you can add `` in the shared component like footer where it will not be destroyed until the app is closed, so u you won't get the error of unsubscribe. – navnath Oct 11 '21 at 10:32
  • @navnath adding `` in the footer component also gives me the same error ;-| Or is there any other way I can add the notification bar at the top of my page ? – ESCoder Oct 12 '21 at 02:10

0 Answers0