如何在angular cli 1.0.0-rc.0中正确包含jQuery？

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

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

 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如故事中所述，当你包含它时， TypeError: $(...).select2 is not a function错误。

Answer 1

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

1. 安装jQuery

    npm install --save jquery 

2. 安装jQuery类型定义以进行类型检查。

    npm install --save-dev @types/jquery 

3. 在angular-cli.json文件中的“scripts”数组中添加jquery文件的refenece。

    "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] 

4. 在要使用的任何组件中导入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 （我还安装了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)); // ...