webpack compatibility

[bryanlarsen]

load with require('pickadate/lib/picker.date') and/or
require('pickadate/lib/picker.time') with jQuery in a global
namespace.

Works with #772, but #772 is
not necessary.

[ocombe]

Ahhh this solves my problem with webpack, any chance to get this merged please ?

[PatrickJS]

+1 I have this problem too

[Vincz]

+1

[carlos-lopez]

+1

[rolandoldengarm]

When will this PR be merged and pushed to the NPM package? Really need this, it has fixed my issue :) But I don't want to make manual changes.

[eddiegroves]

Possible workaround is to disable AMD with imports-loader:

module: {
  loaders: [
    {
      test: /pickadate/,
      loader: 'imports?define=>false'
    }
    // ...
  ]
}

[abacaj]

+1

[jantimon]

@amsul was this reverted?

[brauliodiez]

This solution is for ng-pickadate (wrapper that uses pickadate), but I think it can apply to pickadate as well (specially the trick of the files and disable AMD for the pickadate path).

Following the steps mentioned in this thread, I manage to make it work without having to tweak the code under node_modules. Just a quick recap (angular 1, webpack 2 solution):

First install ng-pickadate

npm install ng-pickadate

It will download as well jquery and pickadate dependencies.

Then we need to add the depencies in our webpack.config, here there's a catch pickadate.js package json main seems not to be pointing to the right entry point, we have to manually indicate which files we want to include:

module.exports = {
  context: path.join(basePath, 'src'),
  resolve: {
    extensions: ['.js', '.ts']
  },
  entry: {
    app: './app/app.ts',
    vendor: [
+      'jquery',
+      'angular',      
+      'pickadate/lib/picker',
+      'pickadate/lib/picker.date',      
+      'ng-pickadate',
    ], 

Now comes fun part, pickadate will try to load AMD modules, in my case we need commonjs, we don't want to change the code on the library, rather disable this
using a rule (loader), just only for the pickadate folder:

  module: {
    rules: [
+      {
+        test: /pickadate/,
+        parser: { amd: false }
+      },            
      {
        test: /\.ts$/,

Now let's review our provide plugin and ensure we have all this ways of global referencing jquery (window.jquery quite important !)

  plugins: [
+    new webpack.ProvidePlugin({
+      "$": "jquery",
+      "jQuery": "jquery",
+      "window.jQuery": "jquery",      
    }),

It's time to start using this in our app, let's include it in the angular module where
we are using it (we are using angular 1.6):

import * as angular from 'angular';
import { LoginComponent } from './login.component';

export const LoginModule = angular.module('loginModule', 
+ ['pickadate'])
  .component('login', LoginComponent)
;

And let's use the directive in the HTML (input)

                        <div class="form-group">
                            <label for="txtEmail">Birthdate</label>
                            <input 
                                type="text" 
+                                pick-a-date="vm.curDate"/>
                        </div>

All this steps are just a recap of feedback got from several issues that were open, thanks to all the chaps that were providing the right tips :-).