jquery - 使用angular，typescript，webpack时如何将jquery添加到窗口对象

Question

我已将 ng2 webpack 指南反向移植到 ng1 - https://angular.io/docs/ts/latest/guide/webpack.html

我有 3 个入口文件 - polyfill.ts、vendor.ts 和 main.ts。这是 webpack 将它们加载到浏览器中的方式。我已将以下内容添加到 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';

和下面的 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
});

开发工作流程运行得非常好，但唯一的问题是因为当 Angular 加载时 jquery/$ 不在窗口对象上，而是使用 jqLit​​e，这让我很难使用 jquery 插件。下面是我从另一个使用 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');
        });

    }

}

“元素”指的是 jqLit​​e，因此它找不到 .bootstrapDP 属性。有没有一种方法可以设置 typescript 或 webpack 来使 Angular 使用 jquery？

Answer 1

我最终将以下内容添加到我的 main.ts 中并摆脱了日期选择器上的无冲突。

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

它仍然感觉有点恶心，但我不想依赖任何 CDN