带有 JavaScriptServices 和 Angular 材料的 ASP.NET CORE 2答案

【问题标题】：ASP.NET CORE with JavaScriptServices and Angular material 2带有 JavaScriptServices 和 Angular 材料的 ASP.NET CORE 2
【发布时间】：2017-03-22 22:30:15
【问题描述】：

我的教程开始于： https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

在我开始添加 Angular 2 材质组件之前真的很棒。我在 app.module.ts 中导入角材质 2：

 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 {
}

我只想添加一个标签：

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

我收到此错误：处理请求时发生未处理的异常。

异常：调用节点模块失败并出现错误：ReferenceError：新的 ScrollDispatcher 未定义窗口 (C:\sources\testAngularCore\ClientApp\dist\main-server.js:6701:46) 在 SCROLL_DISPATCHER_PROVIDER_FACTORY (C:\sources\testAngularCore\ClientApp\dist\main-server.js:6772:32) 在 AppModuleInjector.get (/AppModule/module.ngfactory.js:210:77) 在 AppModuleInjector.get (/AppModule/module.ngfactory.js:215:155) 在 AppModuleInjector.getInternal (/AppModule/module.ngfactory.js:529:53) 在 AppModuleInjector.NgModuleInjector.get (C:\sources\testAngularCore\ClientApp\dist\vendor.js:8563:48) 在 CompiledTemplate.proxyViewClass.AppView.injectorGet (C:\sources\testAngularCore\ClientApp\dist\vendor.js:12008:49) 在 CompiledTemplate.proxyViewClass.View_MdTabHeader0.createInternal (/MdTabsModule/MdTabHeader/component.ngfactory.js:19:157) 在 CompiledTemplate.proxyViewClass.AppView.create (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11951:25) 在 CompiledTemplate.proxyViewClass.View_MdTabGroup0.createInternal (/MdTabsModule/MdTabGroup/component.ngfactory.js:299:19) 在 CompiledTemplate.proxyViewClass.AppView.create (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11951:25) 在 CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:52:19) 在 CompiledTemplate.proxyViewClass.AppView.create (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11951:25) 在 CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:19) 在 CompiledTemplate.proxyViewClass.AppView.createHostView (C:\sources\testAngularCore\ClientApp\dist\vendor.js:11964:25) Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()

也不能导入hammerjs。任何人都可以解释我吗？谢谢！

【问题讨论】：

你使用的是什么版本的角度？
失去那些forRoot() 对路由器和材料的调用。并阅读路径。 angular-2-training-book.rangle.io/handout/routing/…
是的，我在没有 forRoot() 的情况下尝试过，但问题仍然存在。
angular版本：2.4.10
我看到一些与hammerjs 相关的事情是导致此错误的主要原因。尝试将@types/hammerjs 添加到您的主要 package.json 部分，然后将 hammerjs 添加到您的 package.json 开发部分。如果这失败了，你可以找到一个hammerjs的CDN并将它链接到你的主页（_layout.cshtml或其他）

标签： asp.net-core angular-material2

【解决方案1】：

我认为此错误表明某些组件的服务器端渲染存在问题，该组件尝试访问窗口对象，可能来自未在服务器上完全实例化的材料。我通过在 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>
}

还有，

确保将其添加到 package.json

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

然后您需要将材料 css 添加到 webpack 配置并手动调用 webpack。在 vendor.config 添加

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

然后运行

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

在根应用文件夹中调用 webpack。

【讨论】：