如何使用角度,打字稿,的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?
答
我最终将以下内容添加到我的main.ts并摆脱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
});
它剧照感觉有点恶心,但我不想依赖任何CDN的
在你的WebPack配置尝试'的外部:{jQuery的:“jQuery的”}',如果不解决然后单独将它添加到脚本标记到您的html('
感谢您的回应,但由于这是一个内部应用程序,我不想依赖任何CDN。我发布了我的解决方案。 –