如何使用角度，打字稿，的WebPack

时候我已经回迁了NG2的WebPack指导NG1添加了jQuery窗口对象 - https://angular.io/docs/ts/latest/guide/webpack.html 如何使用角度，打字稿，的WebPack

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

的开发流程是工作真的很好，但唯一的一点是因为jQuery/$不上窗口对象角加载时，jqLite被使用，而这使得我很难使用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'); 
     }); 

    } 

}

的“元素”指的是jqLite，因此它不能找到.bootstrapDP财产。有没有办法设置打字稿或webpack使角使用jQuery？

来源

2016-11-22 the-a-train

在你的WebPack配置尝试'的外部：{jQuery的：“jQuery的”}'，如果不解决然后单独将它添加到脚本标记到您的html（'

如何使用角度，打字稿，的WebPack

相关问题