Question

我正在使用带有webpack的Angular 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();

在控制台中我收到此错误： $（...）。键盘不是功能

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

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

感谢

Answer 1

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

import * as $ from 'jquery';

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

Answer 2

首先你应该添加webpack config：

 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

无法在Angular 4和Webpack

2 个答案: