无法在 Angular 4 和 Webpack 中使用 jQuery 插件答案

【问题标题】：Not able to use a jQuery plugin with Angular 4 and Webpack无法在 Angular 4 和 Webpack 中使用 jQuery 插件
【发布时间】：2017-10-27 14:47:26
【问题描述】：

我正在使用带有 webpack 的 Angular 4，但我无法使用 jQuery 插件，使用 angular cli 可以，使用 webpack 不可以

我已将插件包含在 webpack.config.vendor.js 中

const treeShakableModules = [
   .....
    '@angular/router',
    'zone.js',
    'virtual-keyboard',

如果我检查源页面在

script src="/dist/vendor.js?v=SsiHzOEk9BPk3CnH6ivS_kkChKmOOxXsB-fFyDO1R8w"></script>

我可以找到js插件代码

在我的 .ts 代码中

import * as $ from 'jquery';
....
$('#mycontrol').css('background-color', 'red');// I see the change so jQuery works
(<any>$('#mycontrol')).keyboard();

在控制台中我收到此错误： $(...).keyboard 不是函数

使用 angular cli 使用此代码非常简单

declare var $: any;
 $('#mycontrol').keyboard();

谢谢

【问题讨论】：

标签： angular webpack angular-webpack-starter

【解决方案1】：

首先你应该添加它的 webpack 配置：

 plugins: [

        new HtmlWebpackPlugin({
            template: 'src/index.pt'
        }),


        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        }),

    ]

在你的组件中你可以导入它：

import * as $ from 'jquery';

这是访问 jquery 的全局解决方案，然后存在几个选项。

当然不要忘记通过 npm 安装 jquery ：

npm i --save jquery

【讨论】：

嗨。我已经编辑了我的第一篇文章，因为我成功地包含了 jQuery，但现在我在插件函数上遇到了错误。谢谢
在 resolove 部分添加一个新的别名 resolve: { alias: { jquery: "jquery/src/jquery" },
或者还有另一种方法可以将 $ 作为这样的全局上下文： var $ = require('jquery');窗口.$ = $;
嗨，我有 2 个部分，我在第一个部分之后添加了扩展名：['.js']，别名：{ jquery:"jquery/src/jquery"} 但现在出现此错误：NodeInvocationException：由于错误而导致预渲染失败：ReferenceError：第二个解决方案中未定义窗口：“窗口”类型上不存在属性“$”
大量测试但以这个错误结束 $(...).keyboard is not a function

【解决方案2】：

你可以像这样在你的组件中导入它：

import * as $ from 'jquery';

anf 当然是在 angular-cli.json 中导入 jquery.js

【讨论】：

谢谢。我没有 angular-cli。它只有 webpack(webpack.config.js)。现在如何导入我的插件文件，位于 node_modules？
在你的 webpack.config.js module.exports = { resolve: { alias: { jquery: "jquery/src/jquery" } } };
或者你可以使用imports-loader
请将此行添加到您的 webpack 配置中：window.$ = window.jQuery = require('jquery');
ok 将此添加到 ebpack 配置 "new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })" 并从别名中删除 jquery请再试一次