Webpack添加jQuery插件：错误：jQuery需要一个带文档的窗口

我正在使用Angular 4 + webpack。我在webpack.config.vendor.js中向nonTreeShakableModules const添加了一个jQuery插件：

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge'); const treeShakableModules = [ '@angular/animations', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', 'font-awesome/css/font-awesome.css', 'zone.js', ]; const nonTreeShakableModules = [ 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'es6-promise', 'es6-shim', 'event-source-polyfill', 'jquery', 'virtual-keyboard' //HERE ]; 

启动应用程序时出现此错误：

NodeInvocationException：由于错误，Prerendering失败：错误： jQuery需要一个带文档的窗口

如果我刷新页面2-3次，则错误消失。 谢谢你的帮助！

Answer 1

正如您在上一个问题的评论中所述，您无法运行javascript代码，这取决于window和服务器端的一些其他情况（如会话存储）与服务器端预渲染。

ASP.NET Core Angular Web模板等模板随附了服务器端呈现。 这适用于不需要会话存储，身份validation或访问浏览器组件或dom-tree的应用程序。

您必须通过从Index.cshtml删除asp-prerender-module="ClientApp/dist/app.module.server.ts"标记帮助程序来禁用服务器端预asp-prerender-module="ClientApp/dist/app.module.server.ts" 。

更换

同

当然，用my-app的选择器替换my-app ，通常是模板中的app 。

或者，您必须有条件地运行代码， 如此GitHub问题中所指出：

 // boot-client.ts file import 'ngx-charts'; // some.component.ts import { isBrowser } from 'angular2-universal'; import * as $ from 'jquery'; // inside ngOnInit if (isBrowser) { $('body').hide(); // or whatever call you need to make } 

避免在服务器端预渲染上运行此类代码。