Unable to load the angular2modal using Visual studio 2015 dot net core + Angular 2 template

[seanishok01]

I am getting below error when running the modal popup, Please help me to resolve the issue. An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: ReferenceError: document is not defined at new DOMOutsideEventPlugin (C:\Pulsar Project\CodeGenerationTool\Angular2Application1\Angular2Application1\node_modules\angular2-modal\bundles\angular2-modal.umd.js:1392:18) at NgModuleInjector.get (AppModule.ngfactory.js:90:5) at NgModuleInjector.get (AppModule.ngfactory.js:97:108) at NgModuleInjector.get (AppModule.ngfactory.js:102:73) at NgModuleInjector.get (AppModule.ngfactory.js:112:146) at NgModuleInjector.get (AppModule.ngfactory.js:117:79) at NgModuleInjector.get (AppModule.ngfactory.js:122:73) at NgModuleInjector.get (AppModule.ngfactory.js:137:87) at NgModuleInjector.AppModuleInjector.getInternal (AppModule.ngfactory.js:353:49)

Package.Json: { "name": "Angular2Spa", "version": "0.0.0", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/platform-server": "2.0.0", "@angular/router": "3.0.0", "@types/node": "^6.0.38", "angular2-modal": "^2.0.3", "angular2-platform-node": "~2.0.10", "angular2-universal": "~2.0.10", "angular2-universal-polyfills": "~2.0.10", "aspnet-prerendering": "^1.0.6", "aspnet-webpack": "^1.0.11", "bootstrap": "^3.3.7", "css": "^2.2.1", "css-loader": "^0.25.0", "es6-shim": "^0.35.1", "expose-loader": "^0.7.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "isomorphic-fetch": "^2.2.1", "jquery": "^2.2.1", "preboot": "^4.5.2", "raw-loader": "^0.5.1", "rxjs": "5.0.0-beta.12", "style-loader": "^0.13.0", "to-string-loader": "^1.1.5", "ts-loader": "^0.8.2", "typescript": "^2.0.0", "url-loader": "^0.5.7", "webpack": "^1.12.14", "webpack-externals-plugin": "^1.0.0", "webpack-hot-middleware": "^2.10.0", "webpack-merge": "^0.14.1", "zone.js": "^0.6.21" } }

app.module.ts:

import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { UniversalModule } from 'angular2-universal'; import { AppComponent } from './components/app/app.component' import { NavMenuComponent } from './components/navmenu/navmenu.component'; import { HomeComponent } from './components/home/home.component'; import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; import { CounterComponent } from './components/counter/counter.component'; import { ComposeMessageComponent } from './components/compose-message.component';

import { ModalModule } from 'angular2-modal'; import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';

@NgModule({ bootstrap: [AppComponent], declarations: [ AppComponent, NavMenuComponent, CounterComponent, FetchDataComponent, HomeComponent ], imports: [ ModalModule.forRoot(), BootstrapModalModule,

    UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'counter', component: CounterComponent },
        { path: 'fetch-data', component: FetchDataComponent },
        //{ path: 'compose', component: ComposeMessageComponent, outlet: 'popup' },
        { path: '**', redirectTo: 'home' }
    ])
]

}) export class AppModule { }

Home.component.html: import { Component, ViewContainerRef } from '@angular/core'; import { Overlay } from 'angular2-modal'; import { Modal } from 'angular2-modal/plugins/bootstrap';

@Component({ selector: 'home', template: require('./home.component.html') }) export class HomeComponent { constructor(overlay: Overlay, vcRef: ViewContainerRef, public modal: Modal) { overlay.defaultViewContainer = vcRef; } onClick() { this.modal.alert() .size('lg') .showClose(true) .title('A simple Alert style modal window') .body( <h4>Alert is a classic (title/body/footer) 1 button modal window that does not block.</h4> <b>Configuration:</b> <ul> <li>Non blocking (click anywhere outside to dismiss)</li> <li>Size large</li> <li>Dismissed with default keyboard key (ESC)</li> <li>Close wth button click</li> <li>HTML content</li> </ul>) .open(); } }

[RichDef77]

Hi @seanishok01 I am experiencing the same problem. I believe it has to do with server side pre-rendering being enabled. If you remove this from your main app component selector: asp-prerender-module="ClientApp/dist/main-server" I'm willing to bet it will work.

Server side pre-rendering does not work if there is any code that accesses the DOM directly. This is unfortunate. I was able to get it working fine without server sider pre-rendering but that is a huge performance killer so I may need to find a different solution of showing modal dialogs :(