How to import jquery to vendor.ts Angular 2 webpack

Question

I am trying to set up angular 2 app based on webpack. I see that in vendor.ts we have that structure.

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';


// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

I want to import jQuery (for example) but I don't know what. Because when I tried to do that but it's not working. What I'm doing wrong? Thanks for any help.

import 'jquery/dist/jquery.min.js';

So I don't have idea why rxjs imported OK but jquery not :)

Hi Alexey. It is working, but I don't uderstand why they import import '@angular/core'; in vendor.ts and then they do the same in inner modules/components. Should I do the same with jQuery? import jQuery to the vendor.ts and after that do the same in inner modules? — Velidan
– Velidan, Commented Oct 31, 2016 at 10:22
I may be wrong (just starting with ng2 myself) but I think that by importing angular/core in vendor.ts you tell webpack to include that module into the resulting bundle, and later in your code you usually import some specific parts of the module like import { NgModule } from '@angular/core'; - that way you can use NgModule in your code. — Alex Paramonov
– Alex Paramonov, Commented Oct 31, 2016 at 10:29
Glad I helped you, so I changed my comment to answer, you can accept it. — Alex Paramonov
– Alex Paramonov, Commented Nov 1, 2016 at 8:55

Alex Paramonov · Accepted Answer · 2016-11-05 11:55:23Z

2

This is how I implemented it:

I have an alias in resolve section of my Webpack config file:

resolve: { ... alias: { jquery: "jquery/src/jquery" } }

this will allow you to write

import 'jquery';

instead of

import 'jquery/dist/jquery.min.js';

in vendor.ts
Use Webpack ProvidePlugin to make jQuery and $ global:

plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', "window.jQuery": 'jquery' }), ... ]

I may be wrong (just starting with ng2 myself) but I think that by importing angular/core in vendor.ts you tell Webpack to include that module into the resulting bundle, and later in your code you usually import some specific parts of the module like import { NgModule } from '@angular/core'; - that way you can use NgModule in your code.

edited Nov 5, 2016 at 11:55

answered Nov 1, 2016 at 8:55

Alex Paramonov

2,7602 gold badges25 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

How to import jquery to vendor.ts Angular 2 webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related