akveo / akveo/nebular

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

Aperta
#2,354 3 commenti 3 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
8.1k
Fork
1.5k
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### 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](https://akveo.github.io/nebular/docs/getting-started/what-is-nebular#what-is-nebular) 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](https://akveo.github.io/nebular/docs/components/toastr/overview#nbtoastrservice)
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](https://github.com/DoodlesEpic/ng-nebular-universal) (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](https://stackblitz.com/edit/ng-nebular-universal)

### 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
```

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.