2

I've a angular project created using @angular/cli-1.0.0-rc0. I need to use: - jquery - a query widget (in my example http://eonasdan.github.io/bootstrap-datetimepicker/).

Using 'webpack-bundle-analyzer' I can see that jquery is imported in vendor.bundle.js (if imported in a ts file) but not globally exposed, so jquery plugin fails to load itself.

Is there a way to:

  • load jquery (and others libraries such as momentjs) only in scripts bundle?
  • do not add jquery in vendor bundle but add it only as reference?

If I put jquery between scripts:[] section in .angular-cli.json

  • jquery library is added both in vendor and scripts bundles.
  • $ instance in typescript file is not the one exposed globally, so the plugin is available in window.$ but it is not available in angular directive.

In previous versions of angular-cli, a solution found on stackoverflow was to:

  • create a vendor.ts with:
    • import * as jquery from 'jquery';
    • window['jQuery'] = window['$'] = jquery;
  • add vendor.ts in scripts: [] structure

but this solution apparently doesn't work anymore. I receive a webpack error during compilation.


At the moment, as a workaround:

  • jquery, moment, eonasdan datetime picker... added in scripts[]
  • jquery.. not imported in typescript files (just declared as "declare var $:any". I don't like it, but I cannot find any other solutions. Also this one (How to include jQuery properly in angular cli 1.0.0-rc.0?) doesn't work for me.
Community
  • 1
  • 1
Sierrodc
  • 845
  • 6
  • 18
  • Refer this answer [**Plain Javascript as Angular2 Service**](http://stackoverflow.com/questions/42235540/plain-javascript-as-angular-2-service/42235817#42235817) – Aravind Mar 04 '17 at 21:16
  • The question is: "I can import jquery in angular-cli, how can I add plain jquery plugin to the jquery instance added in angular injector"? The link you added is about a third party javascript that doesn't have dependencies. A jquery plugin has dependency to jquery plugin. – Sierrodc Mar 16 '17 at 15:47

0 Answers0