Search code examples
javascriptangularjswebpackangular-moment

Load angular-moment with moment - Error 'module' is not a function


I'm having some problems including angular-moment package using webpack. Let's say in my file app.js I include the file dependences in this way:

import 'moment/src/moment';
import angularMoment from 'angular-moment';
angular.module('helloWorldapp', [angularMoment]);

My webpack.config is the following:

    var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var webpackUglifyJsPlugin = require('webpack-uglify-js-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');


const extractCSS = new ExtractTextPlugin('[name][hash].css');
const extractSCSS = new ExtractTextPlugin('[name][hash].css');
const commonsPlugin = new CommonsChunkPlugin('vendor.js');
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, '/client/index.html'),
    filename: '../client/index.html',
    inject: 'true'
});
const providePlugin = new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.jQuery': 'jquery',
     'window.moment': 'moment'
});

module.exports = {
    entry: {
        app: './client/app/app.js',
        vendor: [
            'angular',
            'angular-animate',
            'angular-aria',
            'angular-cookies',
            'angular-resource',
            'angular-messages',
            'angular-sanitize',
            'angular-socket-io',
            'angular-ui-bootstrap',
            'angular-ui-router',
            'moment',
            'angular-moment',
            'angular-material',
            'angular-translate',
            'angular-translate-loader-partial',
            'lodash',
            'mobile-detect',
            'angular-local-storage'
        ]
    },
    output: {
        path: path.join(__dirname, '/dist/client'),
        filename: '[name][hash].js'
    },
    plugins: [extractCSS, extractSCSS, htmlPlugin, commonsPlugin, providePlugin], // uglifyCode
    debug: true,
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: extractCSS.extract(
                    'css',
                    'sass'
                )
            },
            {
                // SASS LOADER
                // Reference: https://github.com/jtangelder/sass-loader
                test: /\.(scss|sass)$/,
                loader: ExtractTextPlugin.extract(
                    'style',
                    'css!sass!resolve-url!sass?sourceMap'
                )
            },
            {
             test: /\.scss$/,
             loader: ExtractTextPlugin.extract(
             'style',
             'css!sass!resolve-url!sass?sourceMap'
             ),
             include: [path.resolve(__dirname, 'client/app/app.scss')],
             // exclude: [path.resolve(__dirname, 'client/bower_components'), path.resolve(__dirname, 'node_modules')]
             },*/
            {
                test: /\.js$/, loaders: ['ng-annotate', 'babel-loader'], include: [
                path.resolve(__dirname, 'client/')
                // path.resolve(__dirname, 'node_modules/lodash-es/')
            ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)([\?]?.*)$/,
                loader: 'file'
            },
            {
                include: /\.json$/,
                loaders: ['json-loader']
            }
        ]
    },

};

The version of angular-moment is the last one available (v1.0.0-beta.6). I also read the https://github.com/urish/angular-moment/issues/108 but I was not able to find a corret solution. The error is always the same: ' Error 'module' is not a function'

Does anyone know where I am wrong?


Solution

  • Should be like this,

    angular.module('helloWorldapp', ['angularMoment']);