Error: Datepicker is not a function with Angular2,Webpack

[kumawat]

Hello PrimeNg Team,

I have been using your components and it has been awesome at work.

I just recently upgraded my app with webpack and Datepicker compoents keep failing.

My Webpack.config is following,

Code: Select all

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = {
    resolve: {
        extensions: ['', '.js'],
        alias: {
            'jquery.ui.core': 'jquery-ui/ui/core.js',
            'jquery.ui.widget': 'jquery-ui/ui/widget.js'
        }
    },
    module: {
        loaders: [
            { test: /\.css/, loader: extractCSS.extract(['css']) },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
            { test: /\.png$/, loader: "url-loader?mimetype=image/png" },
            { test: /\.gif$/, loader: "url-loader?mimetype=image/gif" },
        ]
    },
    entry: {
        vendor: [
            'bootstrap',
            'bootstrap/dist/css/bootstrap.css',
            'es6-shim',
            'style-loader',
            'jquery',
            'jquery-ui-bundle/jquery-ui',
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/forms',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@angular/platform-server',
            'primeng/primeng',
            'rxjs/Rx',
            'primeui/themes/bootstrap/theme.css',
            'font-awesome/css/font-awesome.min.css',
            'primeui/primeui-ng-all.css',
            './wwwroot/libs/primeui/primeui-ng-all.js',
        ]
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        filename: '[name].js',
        library: 'shared_[name]',
    },
    plugins: [
        extractCSS,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: 'shared_[name]'
        })
    ].concat(isDevelopment ?
    []
    : [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            minimize: true,
            mangle: false // Due to https://github.com/angular/angular/issues/6678
        })
    ]
    )
};

Could you please tell me if something is wrong in config or something more i need to know about primeNG to use it with Webpack?

Awaiting for your support. Thank you.

[kumawat]

@optimus.prime: Is there any solution to this problem with you?

Have not received any reply from your team.

[sbcook]

I'm sure there is a better way through the package manager stuff, but this worked for me after putting these in my index.html:

Code: Select all

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>

[kumawat]

I'm sure there is a better way through the package manager stuff, but this worked for me after putting these in my index.html:

Code: Select all

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>

It is for jQuery Timepicker Addon. This isn't really needed in my case. Are you really sharing it to market it ?

[cagatay.civici]

p-calendar will be native very soon without jquery so you'll be able to remove these.

[kumawat]

p-calendar will be native very soon without jquery so you'll be able to remove these.

Is there any temporary solution so that i can get my Angular App running with Primeng Datepicker?

[mmikeyy]

I was using the component without problems, until I switched to Angular 2 final and started using webpack.

I AM loading jquery first, jqueryUI second. Then jquery-ui-timepicker-addon.min.js.

The calendar component keeps crashing on datepicker not recognized as being a function.

But... if you go to the console and just type $.datepicker, you see that it exists. However if you insert 'console.log $.datepicker' in the component making use of the primeng calendar component, you get undefined. So even though jquery and jqueryUI are loaded first, they seem to be superseded by the lighter version Angular uses.

I have a very simple solution that will do for me until primeng drops the dependency on jqueryUI.

Go to line 46 of the primeng source file for the calendar component (primeng/components/calendar/calendar.js)

Line is originally as follows:

Code: Select all

        this.calendarElement = this.inline ? $(this.el.nativeElement.children[0]) : $(this.el.nativeElement.children[0].children[0]);

Replace the two $ with window.$ , the line becomes:

Code: Select all

 this.calendarElement = this.inline ? window.$(this.el.nativeElement.children[0]) : window.$(this.el.nativeElement.children[0].children[0]);

[cagatay.civici]

Thank you for the tip however we've almost finished the native datepicker so no need for jquery, jquery-ui and timepicker addons anymore. We'll also add multiple date selection and range selection in future versions.