Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NotificationService throws an error in SSR configured application #4276

Closed
yanmariomenev opened this issue Apr 19, 2024 · 1 comment
Closed

Comments

@yanmariomenev
Copy link
Contributor

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
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants