如何在Angular 2应用程序中包含jQuery库

Question

How to include third party jQuery library in Angular 2 application?
How to include http://keith-wood.name/calendarspicker.html jQuery library in angular 2 application?

Answer 1

1-In addition to install it through npm , try to include this line in your angular-cli.json file, inside apps->scripts key like this example:

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

2-Add this plugin to your webpack plugins in webpack.config.js (in module.exports):

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

3- Then import it in the component you need to use it, for example: import * as $ from 'jquery';

Answer 2

To add an external library to an Angular 2 app you download the files and place them in your assets folder (or any folder you may chose to add) angular/src/assets/<your-library> then add the path to the library in your angular-cli.json file. If you upgrade to angular 6 the file is renamed angular.json

Here is an example of one of my angular-cli.json files

 "styles": [
    "../node_modules/materialize-css/dist/css/materialize.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/jqueryui/jquery-ui.js",
    "../node_modules/materialize-css/dist/js/materialize.js",
    "./assets/RTCMultiConnection.min.js",
    "../node_modules/hammerjs/hammer.js",
    "./assets/popup.js"
  ],

It may, however be easier to add an "angular ready" alternative like angular-bootstrap-calendar