ASP.NET CORE with JavaScriptServices and Angular material 2

Question

I start the tutorial on: https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

It is really awesome until i start to add Angular 2 material component. I import the angular material 2 in the 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 { MaterialModule } from '@angular/material';

 @NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        MaterialModule.forRoot(),
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

I just want to add a tab:

<div class='container-fluid'>
    <md-tab-group>
        <md-tab label="One">
            <h1>Some tab content</h1>
            <p>...</p>
        </md-tab>
        <md-tab label="Two">
            <h1>Some more tab content</h1>
            <p>...</p>
        </md-tab>
    </md-tab-group>
</div>

I get this error: An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: ReferenceError: window is not defined at new ScrollDispatcher (C:\sources\testAngularCore\ClientApp\dist\main-server.js:6701:46) at SCROLL_DISPATCHER_PROVIDER_FACTORY (C:\sources\testAngularCore\ClientApp\dist\main-server.js:6772:32) at AppModuleInjector.get (/AppModule/module.ngfactory.js:210:77) at AppModuleInjector.get (/AppModule/module.ngfactory.js:215:155) at AppModuleInjector.getInternal (/AppModule/module.ngfactory.js:529:53) at AppModuleInjector.NgModuleInjector.get (C:\sources\testAngularCore\ClientApp\dist\vendor.js:8563:48) at CompiledTemplate.proxyViewClass.AppView.injectorGet (C:\sources\testAngularCore\ClientApp\dist\vendor.js:12008:49) at CompiledTemplate.proxyViewClass.View_MdTabHeader0.createInternal (/MdTabsModule/MdTabHeader/component.ngfactory.js:19:157) at CompiledTemplate.proxyViewClass.AppView.create (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11951:25) at CompiledTemplate.proxyViewClass.View_MdTabGroup0.createInternal (/MdTabsModule/MdTabGroup/component.ngfactory.js:299:19) at CompiledTemplate.proxyViewClass.AppView.create (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11951:25) at CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:52:19) at CompiledTemplate.proxyViewClass.AppView.create (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11951:25) at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:19) at CompiledTemplate.proxyViewClass.AppView.createHostView (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11964:25) Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()

Cannot import hammerjs as well. Anyone can explain me ? Thanks!

Lose those forRoot() calls on router and material. And read up on paths. angular-2-training-book.rangle.io/handout/routing/… — crthompson
Yes I tried without the forRoot() and i still have the problem. — fardoche6
I'm seeing several things that are related to hammerjs as the main cause for this error. Try adding @types/hammerjs to your main package.json section, then hammerjs to your development section of package.json. If this fails, you can find a CDN of hammerjs and just link it in your main page (_layout.cshtml or whatever) — crthompson

AliWieckowicz AliWieckowicz · Accepted Answer · 2017-04-07T19:39:17

I believe this error is indicating a problem with the server side rendering of of some component that is trying access the window object, probably from material, which isn't fully instantiated on the server. I delt with this by disabling server side rendering in Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}
@*<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>*@
<app>Loading...</app>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

Also,

Make sure you add this to package.json

 "@angular/material": "^2.0.0-beta.2",

Then you need to add the material css to the webpack config and invoke webpack manually. In vendor.config add

 entry: {
            vendor: [
                '@angular/common',
                '@angular/material/core/theming/prebuilt/indigo-pink.css',

then run

webpack --config webpack.config.vendor.js
webpack

in the root app folder to invoke webpack.

ASP.NET CORE with JavaScriptServices and Angular material 2

1 Answers