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.
2
  • Refer this answer Plain Javascript as Angular2 Service Commented Mar 4, 2017 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. Commented Mar 16, 2017 at 15:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.