无法使用角4和Webpack的jQuery插件

Question

我和webpack一起用的是角4，我不能用jQuery插件，有角的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不是函数

与角cli一起使用此代码非常简单。

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

谢谢

Answer 1

可以在组件中导入它，如下所示：

import * as $ from 'jquery';

当然，anf在角-cli.json中导入jquery.js。

Answer 2

首先，应该添加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