1

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.

1 Answer 1

2

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.

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

1 Comment

Thank you for giving the answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.