Back
Oct 3, 2016

How to include JQuery plugins in Angular 2 running via webpack

Hi everyone, today I’m gonna tell you how to use jquery in angular 2 running via webpack. This seemingly a quite trivial task, anyway, can put Angular 2 beginners on the spot when they try to do it. They may even put Angular 2 learning into a cold storage. Totally. Forever.

However, it’s not that difficult as Angular developers from Google and TypeScript guys from Microsoft might have wished.

How to use a jquery plugin? For this task we will need:

  1. angular2-webpack-starter
  2. jquery
  3. fullcalendar
  4. redactor (commercial editor, see details below)
  5. Types !?

Step 1. Just link the plugin

First of all let’s install angular2-webpack-starter. You'll make it, I’m sure. Next step is to install jquery and fullcalendar via npm. Now create an Angular 2 component or directive to store our jquery plugin. In this article I used fullcalendar example. To do that you have to create file calendar.components.ts in ...angular2-webpack-starter/src/app/home/ with this code inside:

import { Component, AfterViewInit, ElementRef } from '@angular/core';

import * as jQuery from 'jquery';
import "fullcalendar";

require('style!fullcalendar/dist/fullcalendar.css');

@Component({
  template: '',
  selector: 'calendar'
})
export class Calendar implements AfterViewInit {
  calendarElement: any;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    this.calendarElement = jQuery(this.elementRef.nativeElement);
    this.calendarElement.fullCalendar({});
  }
}

Take a note of import lines, there we import the jquery first and the fullcalendar afterwards. Makes sense, isn’t it, Cap? We import in typescript jquery module into variable jQuery to use it later in the Angular 2 component, but we won’t call fullcalendar directly from the component as it is a plugin for jquery. Instead, we will use fullCalendar method which fullcalendar adds to jQuery objects while import. Also, you can use let jQuery = require("jquery") for import procedure, this matches ES5 notation standards, while import matches ES6.

The truth is that it is not even necessary to use import * as jQuery from 'jquery'; in each component at all, instead for angular2 import jquery we need to add next lines to WebPack configuration:

new webpack.ProvidePlugin({
  jQuery: "jquery"
})

This will allow using jquery with typescript from everywhere in the project. Read more.

The next step is to import native fullcalendar styles using require and webpack-style-loader. Note that we import styles apart from the component, as if we import them into Component decorator, they will be applied only to elements that have an attribute (with complex unreadable name) generated by Calendar component. But fullcalendar is generated by jquery, so there’re no attributes assigned by Calendar and no styles applied.

On AfterViewInit event we run jquery plugin on native HTML inside the component.

Don’t forget to add Calendar component to ngModules declarations. Now we are ready to ruthlessly replace content of ...angular2-webpack-starter/src/app/home/home.template.html with our component code:

<div class="card-container">
  <h4>Our FullCalendar example</h4>
  <calendar></calendar> <!--this is our fullcalendar-->
</div>

After WebPack dev server started, we can visit http://localhost:3000/to check our new linked fullcalendar example.

It would seem the end but attentive readers might notice that we used calendarElement with type “any” in the component. This is not so good because it disables static type safety check.

Step 2. Link @types

Did you remember how we linked header files in C++? So they are back! In the newest angular-webpack-starter version we are offered to use npm scope @types for this (https://www.npmjs.com/~types). We will use this way rather than any other one by following Microsoft recommendations for data type definitions. To install it we need to run:

npm install @types/jquery @types/fullcalendar --save-dev

So what’s the matter? The fact is that jquery types and protractor types try to export $. This is a known bug but still not fixed since 2014. I have found a way out by having made a fork for jquery types where $ export removed. To use this fork you should modify your package.json by changing this:

"@types/jquery": "^1.10.31",

to this:

"@types/jquery": "git://github.com/magnitronus/types-jquery.git",

Then remove node_modules/@types/jquery and run npm install.

What if the jquery plugin is totally new and there’re no any data type definitions for it in @types? You should create own ones, of course!

Step 3. Own data type definitions

There are two ways:

  1. Create the definitions and make a pull request to repository https://github.com/DefinitelyTyped/DefinitelyTyped, make sure you send it to types-2.0 branch because from this very branch the definitions get to npm scope @types.
  2. Create and save own definitions to file ...angular2-webpack-starter/src/custom-typings.d.ts.

I will use and describe the second way in this article just to show how to create own data types definitions for jquery plugins.

Let’s use commercial editor WYSIWYG for our example as there are no types for it (https://imperavi.com/redactor/). I’m not gonna stop on how to install WYSIWYG to node_modules, they say it’s not an issue for experienced developer.

The component code is similar to calendar’s code:

import { Component, AfterViewInit, ElementRef } from '@angular/core';
import "redactor";

require('style!redactor/redactor.css');

@Component({
  template: '',
  selector: 'redactor'
})
export class Redactor implements AfterViewInit {
  redactorElement: JQuery;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    this.redactorElement = jQuery(this.elementRef.nativeElement);
    this.redactorElement.redactor();
  }
}

However, we don’t have types for this plugin and the simplest way is to add next code to custom-typings.d.ts:

interface JQuery {
  redactor(): JQuery;
}

With this we extend JQuery interface by telling typescript compiler that all Jquery objects (Jquery class instances) will have redactor() method. We can edit this definition later. F.e. if we want to use redactor() only with certain buttons like here https://imperavi.com/redactor/docs/toolbar/, we need to edit the definition this way:

interface RedactorOptions {
  buttons: string[];
}

interface JQuery {
  redactor(): JQuery;
  redactor(options: RedactorOptions): JQuery;
}

You can find one more type - jQueryStatic in jquery.d.ts. We may need to use it for static jQuery methods, i.e to define plugins with names like jQuery.something while plugins, described in this article, have names like jQuery.fn.something.

Conclusion

And this is the end. We had a look at how use jquery in angular 2 running via webpack. However, you better not to use jquery in your Angular 2 app because plenty of require-lines can make your code less readable and clear. And uncontrolled by Angular DOM elements bring a little disorder to a project’s structure.

In conclusion, I’d like to return to types one more time. TypeScript gives us a great opportunity to define types statically. Although it can be easily bypassed, it’s better not to do that as this is a quite powerful way to reduce a number of run errors, what is very important in fast-moving web app frontend development world.

Subscribe for the news and updates

More thoughts
Nov 27, 2024Technology
Stoicism At Work

This article explores how Stoic principles can be applied in the workplace to navigate stress, improve self-control, and focus on what truly matters, with practical examples from the author’s experience in software development.

Mar 18, 2024Technology
From boring to exciting: turn learning to code into an adventure

Tired of boring programming courses where you're forced to read thick textbooks and write code that's never used? Need a platform that makes learning fun and exciting? Then you're in the right place!

Jul 21, 2022Technology
Codemirror: unit-testing codemirror react components

One of our recent projects includes the functionality of an inline code editor. This code editor needed to be highly extensible and have custom features. To address this, we chose Codemirror v6 due to its peculiar architecture - it is highly customizable, and all the additional features are provided into codemirror engine as Extension objects.

Sep 21, 2020Technology
How to Optimize Django ORM Queries

Django ORM is a very abstract and flexible API. But if you do not know exactly how it works, you will likely end up with slow and heavy views, if you have not already. So, this article provides practical solutions to N+1 and high loading time issues. For clarity, I will create a simple view that demonstrates common ORM query problems and shows frequently used practices.

May 10, 2018Technology
How to Build a Cloud-Based Leads Management System for Universities

Lead management is an important part of the marketing strategy of every company of any size. Besides automating various business processes, privately-held organizations should consider implementing an IT solution that would help them manage their leads. So, how should you make a web-based leads management system for a University in order to significantly increase sales?

Mar 4, 2011Technology
Css sprite generation

I've created this small sprite to create css sprites. It glues images from directory directory into single file and generates corresponding css.