CODEWITHSUNDEEP
angularjswebpackbower
ceckenrode
ceckenrode

Reputation: 4703

webpack with angular 1 and bower

I'm building an app that uses webpack to bundle all of my javascript, node modules, and bower components. I was able to get angular and node modules working on their own, but when I tried to include my bower components I get the following error

app.bundle.js:9 Uncaught TypeError: angular.module is not a function

what my webpack build looks like

var webpack = require('webpack');
var BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
  loaders: [
    {test: /\.css$/, loader: "style!css"},
    {test: /\.(woff|svg|ttf|eot)([\?]?.*)$/, loader: "file-loader?name=[name].[ext]"}
  ],
  context: __dirname + '/web',
  entry: {
    app: './app.js',
    vendor: ['angular']
  },
  resolve: {
        modulesDirectories: ["web_modules", "node_modules", "bower_components"]
    },
  output: {
    path: __dirname + '/dist/js',
    filename: 'app.bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin( /* chunkName= */ "vendor", /* filename= */ "vendor.bundle.js"),
    new BowerWebpackPlugin({
      excludes: /.*\.less/
    }),
    new webpack.ProvidePlugin({
      $:      "jquery",
      jQuery: "jquery"
    })
  ],
  extensions: ['', '.json', '.js']
};

inside of my app.js (angular app declaration file) I have this

var angular = require('angular');
require("jquery");
require("bootstrap");

angular.module('App', []);

require('./services');
require('./controllers');
require('./directives');

How can I resolve this issue?

EDIT** I'm starting to think it has something to do with using the same entry point for the commonschunkplugin and the bowerwebpackplugin

Upvotes: 2

Views: 580

Answers (1)

jusopi
jusopi

Reputation: 6813

In my npm-based project that uses Browserify, I had a similar issue. Then I noticed either on another discussion or in the docs it was said (paraphrasing):

do not store angular in a var as it creates issues with the global reference to angular

So instead of 

var angular = require('angular');

try

require('angular');

and still call angular.module( name, []) as you normally would. My guess is that whatever returns from require('angular') is undefined or doesn't provide the angular APIs.

Upvotes: 3

Related Questions