NotificationService throws an error in SSR configured application

[yanmariomenev]

Describe the bug If the NotificationService is used in an SSR-configured application it will throw an ERROR ReferenceError: document is not defined. upon initialization. It seems that the notification doesn't check if the document is available, like our Dialogs package.

To Reproduce Open and run the local project. A17-notifications-ssr (1).zip

Workaround Checking the platform before initializing the NotificationService:

public notificationService!: NotificationService;

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if(isPlatformBrowser(this.platformId)){
      this.notificationService = inject(NotificationService);}
}

public displayNotification(): void {
    if(isPlatformBrowser(this.platformId)){
      this.notificationService.show({
        content: "Custom Notification",
        position: { horizontal: "center", vertical: "bottom" },
        type: { style: "info", icon: true },
      });
    }
  }

[slavenai]

The error seems to be caused by an incorrect application set up - document is referenced in the app.component.ts providers. Removing it and setting the appendTo option of the NotificationSettings resolves the issue.

In app.component.ts:

  @ViewChild("container", { read: ViewContainerRef })
  public container: ViewContainerRef | any;

  constructor(private notificationService: NotificationService) {}

  ngAfterViewInit(){
    this.displayNotification()
  }

  public displayNotification(): void {
    this.notificationService.show({
      content: "Custom Notification",
      appendTo: this.container,
      position: { horizontal: "center", vertical: "bottom" },
      type: { style: "info", icon: true },
    });
  }

In app.component.html:

<div class="append-container" #container></div>