CODEWITHSUNDEEP
javascriptangularjswebpack
danwellman
danwellman

Reputation: 9253

Adding Webpack to an existing Angular app

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?

Upvotes: 2

Views: 2300

Answers (1)

Eugene Starov
Eugene Starov

Reputation: 111

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]);
}());

Upvotes: 3

Related Questions