NodeInvocationException:由于错误,Prerendering失败:ReferenceError:未定义窗口

时间:2017-09-28 16:23:47

标签: angular kendo-ui-angular2

在Core2.0-Angular中我创建了一个SPA应用程序,我在其中添加了Kendo-Charts组件。我在nav上创建了一个链接,并将该组件添加到app.module.shared.ts文件夹中。 这是graph.component.html页面

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts'
import { AppComponent } from '../app/app.component';

import 'hammerjs';

@Component({
selector: 'graph',
template: `
    <kendo-chart [categoryAxis]="{ categories: categories }">
        <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
        <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
        <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
        <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let item of series"
                type="line" style="smooth" [data]="item.data" [name]="item.name">
            </kendo-chart-series-item>
        </kendo-chart-series>
    </kendo-chart>
`

})

export class GraphComponent {
private series: any[] = [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
  }, {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
  }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
  },{
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }];
  private categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];

}

这就是错误:

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined 

那么我需要做些什么来解决这个问题呢?

2 个答案:

答案 0 :(得分:2)

当使用Angular动画来避免错误时,服务器预渲染需要单独的服务器端和客户端呈现配置,这是由于服务器上不存在客户端对象(如窗口,文档等)而触发的。

NoopAnimationsModule必须在服务器端配置中使用,而BrowserAnimationsModule - 在客户端配置中使用:

Using Kendo UI for Angular with ASP.NET Core

Sample app config

答案 1 :(得分:0)

我遇到了与ASP.NET Core 2.0 Visual Studio 2017模板相同的问题。我移动了导入锤子&#39 ;;从app.shared.module.ts到app.browser.module.ts。并且由@topalkata提供,您将希望您的动画在浏览器和客户端之间分开。 &#34; NoopAnimationsModule必须在服务器端配置中使用,而BrowserAnimationsModule - 在客户端配置:&#34;我会对topalkata的回答发表评论,但我还不能发表评论。