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

Question

我正在使用 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：由于错误，预渲染失败：错误： jQuery 需要一个带有文档的窗口

如果我刷新页面 2-3 次，错误就消失了。 感谢您的帮助！

Answer 1

正如您在previous question 的 cmets 中所说，您无法通过服务器端预渲染在服务器端运行依赖于 window 和其他一些情况（如会话存储）的 javascript 代码。

ASP.NET Core Angular Web 模板等模板带有服务器端渲染启用。这适用于不需要会话存储、身份验证或访问浏览器组件或 dom-tree 的应用程序。

您必须通过从Index.cshtml 中删除asp-prerender-module="ClientApp/dist/app.module.server.ts" 标签助手来禁用服务器端预呈现。

替换

<my-app asp-prerender-module="ClientApp/dist/app.module.server.ts"></my-app>

与

<my-app></my-app>

当然，将my-app 替换为您的应用程序的选择器，通常是模板中的app。

或者你必须有条件地运行代码，正如this GitHub issue中所指出的那样：

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

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