Loading jQuery-UI using Angular CLI

Question

Using the Angular CLI, I am trying to load JQuery-UI in my Angular 2 application (for PrimeNG's Datepicker). However, it appears that SystemJS is not loading the JQuery-UI libs.

After building, the JQuery-UI libs are successfully store in the /dist directory:

as a result of the following Angular-cli-build.js configuration:

'jquery-ui-dist/external/jquery/*',
'jquery-ui-dist/jquery-ui.min.js'

I tried the following configurations in system-config.ts, but at runtime the network traffic doesn't indicate the libs were requested and the datapicker indicates jQuery is not defined.

System Config #1: (similar to 3rd party jquery-ui install with angular-cli)

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

SystemJS Config #2:

const map: any = {  
'jquery':'vendor/jquery-ui-dist/external',
'jquery-ui':'vendor/jquery-ui-dist/'
};

const packages: any = {
'jquery':{ defaultExtension : 'js'},
'jquery-ui':{ defaultExtension : 'js', main:'jquery-ui.min.js'}
};

Any suggestions on how to load JQuery-UI via SystemJS?

user3518668 user3518668 · Accepted Answer · 2016-09-01T11:15:46

You can try this : script regular expression in angular

Then in your system-config.ts : system-config.ts

if you want to use /primeng/#/calendar let me know because you need to load the 'jquery-ui-timepicker-addon' too :)

Loading jQuery-UI using Angular CLI

1 Answers