Browse By

Adding jQuery to Angular-CLI project

angular-cli logo

Angular-cli project became quite famous after the latest ng-conf and now more and more people are using it. I am one of them and to be honest I enjoy the simplicity and the convenience it gives you when you want to start a new project with just the basic components. But when it comes to extend the basic functionality, things can be tricky. In one small project that I am working these days I had to include jQuery as dependency, so I followed the wiki instructions and everything worked ok in development mode. But not in production. jQuery was not loading at all. So here is the solution that worked for me:

  1. First step is to add jQuery by running:
npm install jquery --save

2. In your angular-cli-build.js add it in vendorNpmFiles AND in polyfills array like below (otherwise it won’t work in ng server -prod)

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function (defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
    polyfills: [

3. In system-config.ts add it in map and packages like this:

const map: any = {
  'materialize': 'vendor/materialize-css',
  'angular2-materialize': 'vendor/angular2-materialize',
  'jquery': 'vendor/jquery/dist'

/** User packages configuration. */
const packages: any = {
  'materialize': {
    'format': 'global',
    'main': 'dist/js/materialize',
    'defaultExtension': 'js'
  'angular2-materialize': {
    'main': 'dist/index',
    'defaultExtension': 'js'
  'jquery': {
    'main': 'jquery.min',
    'format': 'global',
    'defaultExtension': 'js'

4. And finally in your index.html add the script

<script type=”text/javascript” src=”vendor/jquery/dist/jquery.min.js”></script>

That’s it. Enjoy

2 thoughts on “Adding jQuery to Angular-CLI project”

Leave a Reply

Your email address will not be published. Required fields are marked *