3rd party jquery-ui install with angular-cli

Question

I am using angular-cli for my angular2 project. In my project I want to use jquery-ui. I installed jquery-ui with

npm install jquery jquery-ui

I edited my angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
          'jquery/src/jquery.js',
          'jquery-ui/jquery-ui.js'
    ]
  });
};

How it will update automatically in my dist/vendor folder , Do I need to add the css files (like css/jquery-ui.css) in my index.html like ?

I have followed the moment.js integration from this link but it didnt help with jquery-ui. I will appreciate a working example of jquery-ui integration with angular-cli

Answer 1

In your angular-cli-build.js put like :

'jquery/dist/jquery.min.js',
jquery-ui/jquery-ui.min.js', </i>

Then in your system.config.ts :

const map: any = {
'jquery': 'vendor/jquery/dist/jquery.min.js',
'jquery.ui': 'vendor/jquery-ui/jquery-ui.min.js',

Hope it help

Answer 2

importing scripts in angular-cli.json file is the better approch. By you can avoid issues during production deployment.

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"vendor/jquery/dist/jquery.min.js",
"'vendor/jquery-ui/jquery-ui.min.js"
],

Answer 3

It should work as mentioned in the above approach when you add .js files in the scripts section in the angular-cli.json file.

With that please add this to your main module class and check whether it is working.

import 'jquery';
import 'jquery-ui';