ASP.NET JavaScriptServices核和角质材料2

Question

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

它真的很棒，直到我开始添加角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>

我得到了这个错误:在处理请求时发生了一个未处理的异常。

异常:调用节点模块失败:在新的(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) AppModuleInjector.get (/AppModule/module.ngfactory.js:215:155)上未定义ReferenceError: windowat :529:53) at (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：\source\testAngularCore\ClientApp\dist\在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)在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()

也不能导入锤子。有人能解释我吗？谢谢!

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

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