Question

我开始教程： 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>

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

异常：调用Node模块失败，错误：ReferenceError：窗口未在新的ScrollDispatcher中定义（C：\ sources \ testAngularCore \ ClientApp \ dist \ main-server.js：6701：46）at at SCROLL_DISPATCHER_PROVIDER_FACTORY （C：\ sources \ testAngularCore \ ClientApp \ dist \ main-server.js：6772：32）at at AppModuleInjector.get（/AppModule/module.ngfactory.js:210:77）at at AppModuleInjector.get（/AppModule/module.ngfactory.js:215:155）at at AppModuleInjector.getInternal（/AppModule/module.ngfactory.js:529:53）在AppModuleInjector.NgModuleInjector.get （C：\ sources \ testAngularCore \ ClientApp \ dist \ vendor.js：8563：48）at 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 at CompiledTemplate.proxyViewClass.AppView.create （C：\ sources \ testAngularCore \ ClientApp \ dist \ vendor.js：11951：25）at at CompiledTemplate.proxyViewClass.View_MdTabGroup0.createInternal （/MdTabsModule/MdTabGroup/component.ngfactory.js:299:19）at at CompiledTemplate.proxyViewClass.AppView.create （C：\ sources \ testAngularCore \ ClientApp \ dist \ vendor.js：11951：25）at 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 at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal （/AppModule/AppComponent/host.ngfactory.js:15:19）at CompiledTemplate.proxyViewClass.AppView.createHostView （C：\源\ testAngularCore \ ClientApp \ DIST \ vendor.js：11964：25） Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance + d__7.MoveNext（）

也无法导入hammerjs。有谁能解释我？谢谢！

Answer 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

在root app文件夹中调用webpack。

ASP.NET CORE与JavaScriptServices和Angular材料2

1 个答案: