Vyhledávání na webu

Jak přidat jQuery do objektu window při používání Angular, TypeScriptu a Webpacku

Přenesl jsem průvodce ng2 webpack na ng1 - https://angular.io/docs/ts/latest/guide/webpack.html

Mám 3 vstupní soubory - polyfill.ts, vendor.ts a main.ts. Toto je způsob, jakým je webpack načítá do prohlížeče. Do souboru vendor.ts jsem přidal následující

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';

a následující do 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
});

Vývojový pracovní postup funguje opravdu dobře, ale jediný problém je, že protože jquery/$ není na objektu window při načítání Angularu, je místo něj použito jqLite, což mi ztěžuje používání jquery pluginů. Níže je můj direktiv pro výběr data, který jsem převedl z jiného projektu používajícího 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');
        });

    }

}

„Element“ odkazuje na jqLite, a proto nemůže najít vlastnost .bootstrapDP. Existuje způsob, jak nastavit TypeScript nebo Webpack, aby Angular používal jQuery?

Odpověď č. 1

Nakonec jsem přidal následující do svého main.ts a zbavil se konfliktu s datepickerem.

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
});

Stále to trochu působí nepříjemně, ale nechtěl jsem spoléhat na žádné CDN.

Související články