Angular 2 Installing 3rd party plugins with [email protected] Adding jquery library in angular-cli project
Example
- Install jquery via npm :
npm install jquery --save
Install typings for the library:
To add typings for a library, do the following:
typings install jquery --global --save
-
Add jquery to angular-cli-build.js file to vendorNpmFiles array:
This is required so the build system will pick up the file. After setup the angular-cli-build.js should look like this:
Browse the
node_modulesand look for files and folders you want to add to the vendor folder.
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
// ...
'jquery/dist/*.js'
]
});
};
-
Configure SystemJS mappings to know where to look for jquery :
SystemJS configuration is located in system-config.ts and after the custom configuration is done the related section should look like:
/** Map relative paths to URLs. */
const map: any = {
'jquery': 'vendor/jquery'
};
/** User packages configuration. */
const packages: any = {
// no need to add anything here for jquery
};
- In your src/index.html add this line
<script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>
Your other options are:
<script src="vendor/jquery/dist/jquery.js" type="text/javascript"></script>
or
<script src="/vendor/jquery/dist/jquery.slim.js" type="text/javascript"></script>
and
<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>
-
Importing and using jquery library in your project source files:
Import jquery library in your source .ts files like this:
declare var $:any;
@Component({
})
export class YourComponent {
ngOnInit() {
$.("button").click(function(){
// now you can DO, what ever you want
});
console.log();
}
}
If you followed the steps correctly you should now have jquery library working in your project. Enjoy!
