Problems with webpack

[eliagentili]

I'm using wepback for importing the library and always get this error: el.daterangepicker is not a function

[MartinNuc]

I have same problem. However it actually looks like problem with requiring Dan Grossmans's Bootstrap Datepicker. He binds it on $.fn.datepicker but when used from angular its not present on angular.element. I am afraid that angular uses different jquery than Dan's datepicker binds on.

[timvandijck]

I'm also experiencing this problem. Any workaround?

[jamesholcomb]

I was able to work around this by referencing jQuery (rather than jqLite) and using the imports-loader.

npm i jquery --save npm i imports-loader --save-dev

Then add this to your webpack config loaders

{test: /jquery\.js$/, loader: 'expose?jQuery!expose?$'}

[Eden-Sun]

same problem

[Eden-Sun]

Now I am able to make it work . It needs script loader. Just do like below.

• datapicker_wrapper.js

window.moment = require("moment");
require("script!bootstrap-daterangepicker");
require("script!angular-daterangepicker/js/angular-daterangepicker.js");
module.exports = "daterangepicker";

• main.js

var app = angular.module('app',[ .... , require("./datapicker_wrapper") ] );

A module wrapper is optional. I'd like to put dependancies together. Also loading momentjs is another problem for webpack due to the locale. I use this.

[senhongo]

I solved it by forcefully placing daterangepicker into the window object.

app.ts

import * as daterangepicker from 'bootstrap-daterangepicker';
(<any>window).daterangepicker = daterangepicker

webpack.config.js

new webpack.ProvidePlugin({
  $: 'jquery'
  ...

[ultimatecoder]

I am finding this issue when unit test of Angular is running. The plugin works very nice with distribution built but only causing error when unit tests are running. I am using Grunt, jasmin, karma based unit test. Angular version is 1.2.28. Can anyone help? Thanks!