Question

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

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

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

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

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

a）webpack捆绑jQuery而无需在脚本中指定它

b）如故事中所描述的那样，它仍然会引发TypeError: $(...).select2 is not a function错误。

Answer 1

我在我的项目中使用jQuery如下。

安装jQuery
```
npm install --save jquery
```
安装jQuery类型定义以进行类型检查。
```
npm install --save-dev @types/jquery
```
在angular-cli.json文件中的“scripts”数组中添加jquery文件的参考。
```
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js"
 ]
```
在您要使用的任何组件中导入jquery。
```
import * as jQuery from 'jquery';
```

就是这样。同样，您也可以使用其他库，例如moment.js，d3.js等。

Answer 2

您也可以使用expose-loader。下面的示例是为webpack 2编写的，

{ test: /[\/]jquery\.js$/,
    use: [
      { loader: 'expose-loader', query: 'jQuery' },
      { loader: 'expose-loader', query: '$' }
    ]
  },

Answer 3

以与您提供的链接相同的方式添加它将保证它已加载。否则请在您的组件中尝试以下内容。

npm install jquery

然后在您的组件中使用

declare var $:any;
var $ = require('jquery');

Answer 4

我能够通过暴露Webpack实现我所需要的。使用ng eject命令。

首先，使用npm install -S jquery安装jQuery（我还安装了npm install -S select2，因为我也需要它。）

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

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

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

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

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

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

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？

4 个答案: