Adding Webpack to an existing Angular app

Question

I'm working on an existing (and working) Angular 1.5.5 app. It's very small and has a controller, a directive and a couple of services, all split into individual files.

I'd now like to move to Webpack and make the minimum number of changes to the app to support that. A lot of the Webpack/Angular demos I've found have been about creating a new Angular app with web pack built in from the start, but I don't want to rebuild the existing app, just make whatever changes are necessary to use a webpack-produced bundle. It's also using regular JS, whereas most of the tutorials I've seen are for ES6.

I've got grunt-webpack installed and working, it's creating the bundle.js file and I can see inside the bundle that it's pulling in Angular, Angular-aria and Angular-animate (my module dependencies)

However, when I run the site I see an error:

Uncaught TypeError: angular.module is not a function

My webpack task is as follows:

module.exports = {
    dist: {
        entry: './Static/js/Ng/app.js',
        output: {
            path: './Static/dist/js',
            filename: 'bundle.js'
        }
    }
};

As I say, the actual Webpack bundling seems to be working as expected and creates the bundle.js file.

The main entry file (app.js) is as follows:

(function () {
    'use strict';

    var angular = require('../vendor/angular.js');
    var ngAria = require('../vendor/angular-aria.js');
    var ngAnimate = require('../vendor/angular-animate.js');

    angular.module('app', [ngAria, ngAnimate]);
}());

If I log out the angular variable in this file, it's just an empty object, even though I can see the Angular source in the bundle.

What am I missing?

danwellman · Accepted Answer · 2016-06-02 12:04:59Z

3

You probably shadow the global angular property by your local var angular variable. Try this:

(function () {

    'use strict';
    require('../vendor/angular.js');
    require('../vendor/angular-aria.js');
    require('../vendor/angular-animate.js');

    angular.module('app', [ngAria, ngAnimate]);
}());

edited Jun 2, 2016 at 12:04

danwellman

9,4018 gold badges65 silver badges92 bronze badges

answered Jun 2, 2016 at 11:51

Eugene Starov

1114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding Webpack to an existing Angular app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related