如何在angular cli 1.0.0-rc.0中正确包含jQuery? [英] How to include jQuery properly in angular cli 1.0.0-rc.0?

问题描述

我在AngularJS项目中使用基于jQuery的select2组件.我和这里的人有类似的问题: https://github.com/fronteed/icheck/issues/322 ，并使用那里的建议对其进行了解决.准确地说，我在不使用该建议时收到错误TypeError: $(...).select2 is not a function.

I use jQuery-based select2 component in my AngularJS project. I had similar issue as guys here: https://github.com/fronteed/icheck/issues/322, and solved it using advice from there. To be accurate, I received error TypeError: $(...).select2 is not a function when not using that advice.

即我在@angular/cli/models/webpack-configs/common.js中的Webpack配置中添加了下几行.

i.e. I added next lines to configuration of Webpack in @angular/cli/models/webpack-configs/common.js.

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
]

这是在angular/cli中启用jQuery的最佳方法吗?

Is it the best possible way to enable jQuery in angular/cli?

我不认为与 https://中的操作相同github.com/angular/angular-cli/wiki/stories-global-lib 是正确的方法，因为

I don't think that doing same as in https://github.com/angular/angular-cli/wiki/stories-global-lib is correct way, because

a)webpack捆绑了jQuery，而无需在脚本中指定

a) webpack bundles jQuery without need to specify it in scripts

b)如故事所述，当您将其包含在内时，它仍然会引发TypeError: $(...).select2 is not a function错误.

b) it still throws TypeError: $(...).select2 is not a function error when you include it as described in story.

推荐答案

我能够通过暴露Webpack来实现所需的功能.使用ng eject命令.

I was able to achieve what I needed by exposing Webpack. Use ng eject command.

首先，使用npm install -S jquery安装jQuery(并且我也安装了npm install -S select2，因为我也需要安装).

First, install jQuery using npm install -S jquery (and I also installed npm install -S select2, because I needed that too).

然后，请确保已备份package.json文件，因为在ng eject期间，Angular CLI会尝试将其Webpack依赖项添加到package.json中.

Then, make sure that you made backup of your package.json file, since during ng eject Angular CLI will try to add its Webpack dependencies inside your package.json.

ng eject完成工作后，在我添加的webpack.config.js内部

After ng eject finished working, inside webpack.config.js I added

// ... Inside require/imports part
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

// ... Inside `plugins` section of Webpack configuration
new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })

现在select2将$(...).select2函数正确地添加到全局jQuery对象中！

And now select2 adds $(...).select2 function to global jQuery object properly!

要在.ts文件中使用带有select2的jQuery，可以在该文件的开头添加下一行:

To use jQuery with select2 inside your .ts file, you can add next lines at the beginning of that file:

import "select2";
import "jquery";
declare var $: any;

// Somewhere deep within component
// ...

$(this.input.nativeElement)
    .select2(config)
    .on("change select2:select select2:unselect", (e: any) => this.onSelect2ElementChange(e));

// ...

这篇关于如何在angular cli 1.0.0-rc.0中正确包含jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！