Adding jQuery to Angular-CLI project

admin

9 years ago

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:

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: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/dist/**/*.+(js|min.map)',
      'angular2-materialize/dist/*',
      'materialize-css/dist/**/*'
    ],
    polyfills: [
      'vendor/es6-shim/es6-shim.js',
      'vendor/reflect-metadata/Reflect.js',
      'vendor/systemjs/dist/system.src.js',
      'vendor/zone.js/dist/zone.js',
      'vendor/jquery/dist/jquery.min.js'
    ]
  });
};

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

That’s it. Enjoy