0

What's the best way to import a javascript jQuery's function (function($) ...)(JQuery) into Angular2?

In the project I'm using the default configuration of AngularCLI so it's using webpack and typescript.

I should import https://github.com/digitalbreed/jquery.fbmessenger that works invoking some function 

     var element = $('.phone')
            // Initialize the plugin
            .fbMessenger({
              // options go here
            });
element.fbMessenger('start', { delay: 1000 })

In the project following some instructions on Internet encounter some problems and I don't know what's the best way to do it:

  1. Using UpgradeModule form the Angular2 Doc there are an error, on @angular\core thare aren't StaticProvider

  2. Importing jquery.fbmessenger like import * as $ from "jquery" how I could refear fbMessenger? import * as fbMessenger from "jquery.fbmessenger" doesn't let me invoke fbMessenger as a function

  3. Like jQuery I have to write a file on @type for the function? Or should I insert an instruction on type.d.ts? So how could I do it?

Thank's for your help.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Gabriele Bazzotti
  • 43
  • 6
  • This might help you: https://hackernoon.com/wrap-any-jquery-plugin-with-angular-2-component-case-study-8b00eacec998 – abhijeetwebdev Nov 08 '17 at 14:28
  • The best way is to _not do it_. That's not the Angular way. The way this is accomplished normally is someone will refactor the library to an Angular module. – random_user_name Nov 08 '17 at 15:37
  • @AbhijeetWebDev thanks for your help, I followed the guide that you linked but unfortunatelly that didn't solve the problem, probably there are an error in my webpack configuration. – Gabriele Bazzotti Nov 09 '17 at 08:04
  • @RahulSingh, the url that you give me :github.com/rahulrsingh09/AngularConcepts/faq return 404, I will see if in the exampe there are some inclusion of a jquery function. Thanks – Gabriele Bazzotti Nov 09 '17 at 08:06
  • @cale_b I know it, but I must use some jquery function to give a better look and fell of the site and a lot of them aren't refactored. – Gabriele Bazzotti Nov 09 '17 at 08:08
  • @GabrieleBazzottisorry my bad this is the link https://rahulrsingh09.github.io/AngularConcepts/faq – Rahul Singh Nov 09 '17 at 08:10
  • I strongly doubt you need jQuery to give it the "look and feel". I recommend investing in learning the "Angular way", and you'll be pleasantly surprised at what you can do. For starters, check out this answer: https://stackoverflow.com/a/15012542/870729 – random_user_name Nov 09 '17 at 15:20
  • @cale_b I will explain better: I'd like to use Angular2 and all the JQuery's plugins that already exists. I know that the correct way is to refactor them, and that's possible; but sometimes there isn't time to do that. – Gabriele Bazzotti Nov 09 '17 at 15:55
  • Have you asked Google? https://hackernoon.com/wrap-any-jquery-plugin-with-angular-2-component-case-study-8b00eacec998 or https://gearheart.io/blog/how-to-include-jquery-plugins-in-angular-2-running-via-webpack/ or https://medium.com/@NetanelBasal/typescript-integrate-jquery-plugin-in-your-project-e28c6887d8dc – random_user_name Nov 09 '17 at 20:46
  • @cale_b I Have tried some guide but they give me some error, maybe the problem is the webpack configuration's loader that doesn't load the js file. Now I will try with the medium one and gearheart, hackernoon I have already tried but did't solve the problems. – Gabriele Bazzotti Nov 09 '17 at 21:37

0 Answers0