1

我将 Angular 4 与 webpack 一起使用，但我无法使用 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 is not a function

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

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

谢谢

4

2 回答 2

1

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

import * as $ from 'jquery';

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

于 2017-10-27T14:52:34.180 回答
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
于 2017-10-27T15:07:21.337 回答