如何在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错误。
我在我的项目中使用jQuery如下。
-
安装jQuery
npm install --save jquery -
安装jQuery类型定义以进行类型检查。
npm install --save-dev @types/jquery -
在angular-cli.json文件中的“scripts”数组中添加jquery文件的refenece。
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] -
在要使用的任何组件中导入jquery。
import * as jQuery from 'jquery';
而已。 同样你也可以使用其他库，如moment.js ， d3.js等。
您也可以使用expose-loader 。 以下示例是为webpack 2编写的，
{ test: /[\/]jquery\.js$/, use: [ { loader: 'expose-loader', query: 'jQuery' }, { loader: 'expose-loader', query: '$' } ] },
以与您提供的链接相同的方式添加它将保证它已加载。 否则请在您的组件中尝试以下。
npm install jquery
然后在您的组件中使用
declare var $:any; var $ = require('jquery');
通过暴露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)); // ...