modal service breaks universal server side rendering

Bug description:

The modal service seems to be causing a bug that prevents server side rendering from working properly. I realize this is still a feature in development, but I wanted to make a note of it, and it didn’t seem like a bug report had been posted yet.

You can use the universal-starter repo to clone a test application:

https://github.com/angular/universal-starter

Compile and run on localhost using two npm scripts:

npm run build:ssr npm run serve:ssr

When NgbModule.forRoot() is added to the root NgModule, everything is working fine. However, when NgbModal is injected into a component, the below error message occurs after compilation and attempting to visit localhost.

Error message:

Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (C:\Users\Alec\nodeprojects\testapp\dist\server.js:4059:34) at CodegenComponentFactoryResolver.resolveComponentFactory (C:\Users\Alec\nodeprojects\testapp\dist\server.js:4123:19) at new NgbModalStack (C:\Users\Alec\nodeprojects\testapp\dist\server.js:62589:59) at _createClass (C:\testapp\dist\server.js:10896:20) at _createProviderInstance$1 (C:\Users\Alec\nodeprojects\testapp\dist\server.js:10866:26) at resolveNgModuleDep (C:\Users\Alec\nodeprojects\testapp\dist\server.js:10851:17) at _createClass (C:\Users\Alec\nodeprojects\testapp\dist\server.js:10896:107) at _createProviderInstance$1 (C:\Users\Alec\nodeprojects\testapp\dist\server.js:10866:26) at resolveNgModuleDep (C:\Users\Alec\nodeprojects\testapp\dist\server.js:10851:17) at NgModuleRef_.get ``(C:\Users\Alec\nodeprojects\testapp\dist\server.js:12076:16)

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.0.0

ng-bootstrap: 1.0.0-beta.5

Bootstrap: 4.0.0-beta.2

[elSuperRiton]

@JinnaBalu Same here. Window is not defined. Been on this problem for ages ! Did you find how to get around this ?

[belobrad]

This worked for me as a temp fix:

function NgbModalStack(_applicationRef, _injector, _componentFactoryResolver) { this._applicationRef = _applicationRef; this._injector = _injector; this._componentFactoryResolver = _componentFactoryResolver; this._backdropFactory = (typeof window !== 'undefined') ? _componentFactoryResolver.resolveComponentFactory(NgbModalBackdrop) : NgbModalBackdrop; this._windowFactory = (typeof window !== 'undefined') ? _componentFactoryResolver.resolveComponentFactory(NgbModalWindow) : NgbModalWindow; }