Angular-cli: jQuery not found in prod build

[rkralston]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Win10
2. Versions. Please run ng --version. If there's nothing outputted, please
   run in a Terminal:
   node --version
   And paste the result here.
   angular-cli: 1.0.0-beta.10
   node: 6.1.0
   os: win32 x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   Loading jQuery as a 3rd partly library, references in components fail.

npm i jquery --save

typings install dt~jquery --global --save
angular-cli-build.js:
'jquery/dist/jquery.min.+(js|map)',

system-config.js:

const map: any = { 'jquery': 'vendor/jquery/dist/' };

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

app.component.ts:
import * as jquery from 'jquery'; . . . console.log(jquery); . . . jQuery('#input');

1. The log given by the failure. Normally this include a stack trace and some
   more information.
2. Mention any other details that might be useful.
   https://github.com/rkralston/test-app

---

Thanks! We'll be in touch soon.

[unseen1980]

Hi I had the same issue with jquery in -prod and I was able to solve it by following the directions from here: https://github.com/angular/angular-cli/issues/1118
See vaudy's and sqwk's answers.
Thanks

[rkralston]

@unseen1980: Not sure what instructions you mean. If you'll look at my reference project, everything is configured properly. Have you ran your config as -prod? When you build for production, all thrid party libraries not in the polyfills array are merged into main.js and loaded at the end of index.html. In my builds, jQuery is loaded after my application JS files so they cannot reference jQuery. Other third party libraries are OK with jQuery in my configuration. So when I load bootstrap using the 3rd party configuration, bootstrap is OK. My problem is using jQuery in my app JS with this configuration.

It looks like one of two approaches will solve this:
1) custom configuration of polyfills array allowing inclusion of jQuery.
2) prioritize the merging of jQuery to make sure it is loaded before any app JS.

I would personally prefer to be able to include jQuery with the polyfills.

In the meantime, I am loading it manually above the polyfills from the CDN and including the typings definition in my project with the other polyfills definitions.

[unseen1980]

Ok, for me it was not loading the jquery at all.
Then maybe you need to declare var $:any;

[rkralston]

Looks like I pushed the wrong thing to my repo. That is fixed.

$ is used otherwise by one of the polyfills. (very irritating). I tried var jQuery: any;. That does not work either.

Once the page is entirely loaded, the jQuery object does get loaded into the global space. However, the problem is the order of loading. jQuery is not available for any of my app JS.

[filipesilva]

Closed as this issue was made obsolete by https://github.com/angular/angular-cli/pull/1455.

[rkralston]

Just to clarify, upgrading to 11 should fix this?

Thanks, @filipesilva

[filipesilva]

@rkralston correct. beta.11 isn't out yet, but this week there should be a special preview release that you can install as angular-cli@webpack that lets you use the new build system. We'll also provide detailed upgrade instructions.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}