using jQuery globally within Angular 2 application

Question

I'm trying to figure out how to use jQuery globally within my angular 2 app, the only reasonable source I found so far is this stackoverflow answer However I can't seem to get it working. Is there a way to achieve this with npm package management instead of tsd (this command is not working for me, I assumed it is coming from typescript, but seems like not).

After this, I think I need to reference jQuery within my app.ts file? (main file used by bootstrap.ts to boot the application)

Here is my project structure

app
  components
    app.ts
  services
  typings
  bootstrap.ts
index.html

and few code examples I believe need to be used for jQuery implementation

app.ts

import {Component, View} from 'angular2/core';

@Component({
    selector: 'app',
    templateUrl: 'app/components/app.html'
})

export class App { }

bootstrap.ts

import {App}              from './components/app';

bootstrap(App);

Poul Kruijt · Accepted Answer · 2016-12-22 07:53:40Z

5

Install the jquery typings using:

npm install @types/jquery

Include the jQuery.js file in your index.html

And.. that's it I guess :)

Good luck

edited Dec 22, 2016 at 7:53

answered Jan 13, 2016 at 9:51

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ilja Over a year ago

And I assume I need to include desired version of jQuery in html right?

Poul Kruijt Over a year ago

Yes, indeed. A reference in typescript tells the compiler that you take care of adding the required javascript

Poul Kruijt Over a year ago

fyi, tsd is the typescript definition manager. You can install this by running npm -g install tsd. After that you can install definition files like jQuery by running tsd install jquery :). This way you do not have to download them manually

PaladiN Over a year ago

@PierreDuc Now on angular 2 how is the typings used as we don't use typings anymore, and we use npm to get the dependencies.

Poul Kruijt Over a year ago

@PaladiN You can install them using this: npm install @types/jquery. Together with including the jquery.js in your index.html

Collectives™ on Stack Overflow

using jQuery globally within Angular 2 application

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related