ng-pickadate and webpack

For the folks that are using webpack, I have added a workaround to let developers use this great directive, hope some day we get some proper fixes for this.

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 :-).

Toilal / ng-pickadate

ng-pickadate and webpack #48