CODEWITHSUNDEEP
angularjswebpack
Haoliang Yu
Haoliang Yu

Reputation: 3097

_angular.angular undefined error when loading angular app built by webpack

I am trying to bootstrap an AngularJS app built with Webpack. But I get the following error and the module isn't set up.

TypeError: _angular.angular is undefined

I dig into the generated code chunk and find that the _angular.angular is from

var _angular = __webpack_require__(1);

var _angularUiBootstrap = __webpack_require__(3);

_angular.angular.module('app', [_angularUiBootstrap.bootstrap]).constant('_', window._).run(function ($rootScope) {
  $rootScope._ = window._;

It looks like that _angular.angular.module should be _angular.module. I probably use a wrong way to bootstrap angular, or use an incorrect Webpack configuration. Here is my code:

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var srcDir = 'static_src';
var outputDir = 'static';

module.exports = {
  devtool: 'source-map',
  debug: true,
  entry: {
    app: path.resolve(srcDir, 'app.js')
  },
  output: {
    path: outputDir,
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },
  resolve: {
    extensions: ['', '.js', '.less', '.css'],
    alias: {
      npm: __dirname + '/node_modules'
    }
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015'],
          plugins: ['syntax-decorators', 'ng-annotate']
        },
        exclude: /node_module/
      },
      { test: /\.less$/, loader: 'to-string!css!less' },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
      { test: /\.(png|gif|jpg)$/, loader: 'file?name=images/[name].[ext]' }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin('[name].css')
  ]
};

app.js

import { angular } from 'angular';
import { bootstrap } from 'angular-ui-bootstrap';

angular.module('app', [bootstrap]);

I am using angular 1.5.0 and webpack 1.12.14.

Thanks in advance.

Upvotes: 1

Views: 864

Answers (1)

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

your error is in the require statement. you are using

import { angular } from 'angular';

this implies that there is an angular variable inside of the exported angular module. what you want to use is

import angular from 'angular';

try that.

Upvotes: 2

Related Questions