-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
cannot load module with webpack and bower #775
Comments
See #779 |
Does not solve the issue for me. Using webpack 2. I can see that AMD is off, though $.pickadate is not a function. [edit] |
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
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 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 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 :-). |
Hi, I am new pickadate module. |
Closing as this issue is very old and we did not receive further feedback. You might want to try the externals option of webpack. |
I am using webpack and bower together, however, i got the below error:
here is my bower.json
then i use
require('pickadate')
in my jsany ideas?
The text was updated successfully, but these errors were encountered: