Reputation: 389
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?
Upvotes: 0
Views: 464
Reputation:
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
Upvotes: 1
Reputation: 423
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';
Upvotes: 1