@nebular/theme Toastr module is not working with Universal SSR

[DoodlesEpic]

Issue type

I'm submitting a ... (check one with "x")

• [X] bug report
• [ ] feature request

Issue description

Current behavior: When using the @nebular/theme npm package and the Toastr module in an Angular project with Universal SSR the error ReferenceError: document is not defined at NbViewportRulerAdapter will appear upon starting the SSR server, I see this as a bug since the documentation clearly states it has SSR support and the other modules work fine.

Expected behavior: I would expect that all components of the @nebular/theme npm package were compatible with Angular's Universal SSR, or that the documentation had more information about how to get it set up or what modules do not work with it.

Steps to reproduce: This is just getting the application to a point where we have an error with Universal SSR because of Nebular, to just see the issue you may also clone the GitHub repo or check out the StackBlitz project.

Generate a new Angular project using the Angular CLI: ng new nebular-test-ssr No need to enable routing for the project.

If you don't have the Angular CLI install it with: npm install -g @angular/cli

Enter the project directory and configure Universal SSR with the CLI schematic: ng add @nguniversal/express-engine If it succeeds you should see: √ Packages installed successfully.

Now lets spin up the server to check if it's working (it should be): Run npm run dev:ssr Go to localhost:4200 where it should be hosting the server and you should see the default Angular project home page, if you open the page source code you should see that the page returns actual HTML and CSS, this means that Universal SSR is working as expected.

So to see the problem with Nebular we have to add it using the CLI schematic: ng add @nebular/theme Just select the default settings. Then spin up the server again and go to localhost:4200, the Angular app should still be working as expected.

Now to actually reproduce the error go the app.module.ts and import the Toastr module Go to app.module.ts and add the import to the top of the file:

import { NbThemeModule, NbLayoutModule, NbToastrModule } from '@nebular/theme';

And add the module to the imports array:

@NgModule({
  imports: [
    [...] // Other imports from the CLI
    NbToastrModule.forRoot(),
  ],
})

Now go to app.component.ts and import the module: import { NbToastrService } from '@nebular/theme'; And inject it on your constructor: constructor(private toastrService: NbToastrService) {}

Spin the server back again with npm run dev:ssr and go to localhost:4200, make sure to reload the page with both F5 and CTRL + F5 to make sure, you should now see the error thrown: ReferenceError: document is not defined at NbViewportRulerAdapter._getDocument [...]

Related code:

Run npm run dev:ssr, make sure to read "steps to reproduce" to understand better.

GitHub project with this problem (followed the same exact steps from here)

I tried supplying a StackBlitz project but I was not able to get it working so I suggest cloning the GitHub repo or following the steps to reproduce, however, if you just want to read the code you can take a look at the StackBlitz project

Other information:

NPM, Node, OS, Browser

Node: v12.16.1
NPM: 6.13.4
OS: Windows 10
Browser: Chrome

Angular, Nebular

Angular 9
Nebular 5

[tmk1991]

@DoodlesEpic have you solved this?

[DoodlesEpic]

@DoodlesEpic have you solved this?

No, I went to NextJS after having a few extra issues with Angular Universal, in general I think it's too much hassle for what it's worth.

[SlinkyPotato]

Hey @DoodlesEpic, do you have any theme alternatives to nebular for nextjs?