danwellman danwellman - 8 months ago 70
AngularJS Question

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

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

The main entry file (
) 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
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?


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

(function () {

    'use strict';

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