How to add jquery to window object when using angular, typescript, webpack

Question

I have backported the ng2 webpack guide to ng1 - https://angular.io/docs/ts/latest/guide/webpack.html

I have 3 entry files - polyfill.ts, vendor.ts and main.ts. This is the way webpack loads them into the browser. I have added the following to vendor.ts

import 'jquery';
import 'angular';
import 'angular-ui-router';
import 'angular-ui-bootstrap';
import 'angular-loading-bar';
import 'checklist-model';
import 'restangular';
import 'lodash';
import 'moment';
import 'bootstrap-datepicker';

and the following to main.ts

import "./styles/main.scss";

import app from './app';
import * as $ from 'jquery';

var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;

angular.bootstrap(document, [app], {
    strictDi: true
});

The development workflow is working really well but the only thing is because jquery/$ is not on the window object when angular loads, jqLite is used instead which makes it hard for me to use jquery plugins. Below is my date picker directive that I have ported from another project that is using ES5:

export function DatePickerDirective($timeout: ng.ITimeoutService): ng.IDirective {
    'ngInject';

    return {
        restrict: 'A',
        require: '?ngModel',
        link: link
    };

    function link(scope: any, element: any, attrs: any, ngModel: any) {
        'ngInject';

        $timeout(function () {
            element.bootstrapDP({
                format: 'dd/mm/yyyy',
                forceParse: true,
                autoclose: true,
                todayBtn: 'linked',
                todayHighlight: true,
                daysOfWeekHighlighted: [0, 6]
            });

        });

        scope.$on('$destroy', function () {
            element.bootstrapDP('remove');
        });

    }

}

The 'element' is referring to jqLite and hence it can't find the .bootstrapDP property. Is there a way to setup typescript or webpack to make angular uses jquery?

In your webpack config try externals: { jquery: 'jQuery' } and if it doesn't solve it alone then add it also in a script tag to your html (<script src="https://code.jquery.com/jquery-x.x.x.js">) webpack.js.org/configuration/externals — jal
– jal, Commented Nov 22, 2016 at 12:05
Thanks for the response but as this is an internal application I didn't want to rely on any CDN's. I've posted my solution. — the-a-train
– the-a-train, Commented Nov 22, 2016 at 12:30

the-a-train · Accepted Answer · 2016-11-22 12:29:54Z

4

I ended up adding the following to my main.ts and getting rid of the no conflict on the datepicker.

import app from './app';
import * as $ from 'jquery';

declare var window : any; <--- THIS LINE
window.$ = window.jQuery = $; <--- AND THIS LINE

angular.bootstrap(document, [app], {
    strictDi: true
});

It stills feels a bit gross but I didn't want to rely on any CDN's

answered Nov 22, 2016 at 12:29

the-a-train

1,14313 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

How to add jquery to window object when using angular, typescript, webpack

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related