加载由 webpack 构建的 Angular 应用程序时出现 _angular.angular 未定义错误答案

【问题标题】：_angular.angular undefined error when loading angular app built by webpack加载由 webpack 构建的 Angular 应用程序时出现 _angular.angular 未定义错误
【发布时间】：2016-04-07 02:23:29
【问题描述】：

我正在尝试引导使用 Webpack 构建的 AngularJS 应用程序。但是我收到以下错误并且模块没有设置。

TypeError: _angular.angular is undefined

我挖掘生成的代码块，发现_angular.angular来自

var _angular = __webpack_require__(1);

var _angularUiBootstrap = __webpack_require__(3);

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

看起来_angular.angular.module 应该是_angular.module。我可能使用了错误的方式来引导 Angular，或者使用了不正确的 Webpack 配置。这是我的代码：

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

我正在使用 angular 1.5.0 和 webpack 1.12.14。

提前致谢。

【问题讨论】：

标签： angularjs webpack

【解决方案1】：

您的错误在 require 语句中。你正在使用

import { angular } from 'angular';

这意味着导出的角度模块内部有一个角度变量。你要使用的是

import angular from 'angular';

试试看。

【讨论】：

感谢您的回答。