Using Angular and localForage with webpack

Question

I'm trying to gather angular, localForage and angular-localForage with webpack. My require file looks like this,

// Angular libs
require('../bower_components/angular/angular.min.js')
require('../bower_components/angular-resource/angular-resource.min.js')
require('../bower_components/angular-ui-router/release/angular-ui-router.min.js')
require('../bower_components/angular-bootstrap/ui-bootstrap.min.js')
require('../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')

require('../bower_components/localforage/dist/localforage.min.js')
require('../bower_components/angular-localforage/dist/angular-localForage.js')

angular-resource, angular-ui-router and ui-bootstrap worked just fine, but when I require angular-localForage things started to get complicated. My webpack.config.js looks like this,

var path = require('path')

module.exports = {
    entry: "./src/app/app.js",
    output: {
        path: './src/assets',
        filename: "bundle.js",
        publicPath: 'assets/'
    }
    , module: {
        loaders: [
            {test: /\.less$/, loader: "style!css!less"},
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

        ]
    }
    , resolve: {
        root: [ path.resolve('./src/bower_components') ]
        , moduleDirectories: ['./src/bower_components']
    }    
};

When I run the applications, on the console I see this error

Uncaught TypeError: Cannot read property 'module' of undefined

Which occurs in line 1 of angular-localForage code

'use strict';

1:  var angularLocalForage = angular.module('LocalForageModule', ['ng']);
2:  angularLocalForage.provider('$localForage', function() {
3:    var lfInstances = {},

This means that angular is not entering into that scope. I've tried with imports-loader and exports-loader with no success.

Any ideas how this should be done?

Merth

Answer 1

This happens because angular-localforage expects "this" to be global scope (window). I have made it work with code:

require("imports?this=>window!angular-localforage/dist/angular-localForage.js")

This code depends on imports-loader npm module so please run:

npm install imports-loader

I have also added some config for webpack to make it resolve localforage correctly:

    var path = require('path')

    module.exports = {
        entry: "./app.js",
        output: {
            path: './',
            filename: "bundle.js",
            publicPath: '/'
        }
        , module: {
            loaders: [
                {test: /\.less$/, loader: "style!css!less"},
                {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
                {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
                {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
                {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
                {
                    include: [
                        path.resolve(__dirname, "bower_components/localforage")
                    ],
                    //Export localforage var
                    loader: 'exports-loader?localforage'
                }
            ]
            //Don't parse 'require' inside localforage because wepack can't resolve it coorectly
            , noParse: /localforage\./
        }
        , resolve: {
            root: [ path.resolve('./bower_components') ]
            , moduleDirectories: ['./bower_components']
            , alias: {
                //Make webpack to load compiled version, not source.
                'localforage': 'localforage/dist/localforage.js'
            }
        }
    };

You don't also need to require localforage manually it will be added when angular-localForage will be parsed.

Vasyuta

You sure that it solves the problem? When I use your solution, angular-localforage throws me Error: Cannot resolve module 'localforage'. I work arround this with the script loader, doing require('script!.. angular-localforage'). – Merth

I have updated my answer with my webpack config. Not sure if my solution is the best but at least it doesn't executes modules' code in global scope. – Vasyuta