带有 angular 1 和 bower 的 webpack

Question

我正在构建一个应用程序，它使用 webpack 来捆绑我所有的 javascript、节点模块和 bower 组件。我能够让角度和节点模块自行工作，但是当我尝试包含我的凉亭组件时，我收到以下错误

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

我的 webpack 构建是什么样子的

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']
};

在我的 app.js（角度应用程序声明文件）里面我有这个

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

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

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

我该如何解决这个问题？

编辑** 我开始认为这与为 commonschunkplugin 和 bowerwebpackplugin 使用相同的入口点有关

Answer 1

在我使用 Browserify 的基于 npm 的项目中，我遇到了类似的问题。然后我注意到另一个讨论或文档中说（释义）：

不要将 angular 存储在 var 中，因为它会在全局引用 angular 时产生问题

所以不是

var angular = require('angular');

试试

require('angular');

仍然像往常一样拨打angular.module( name, [])。我的猜测是从require('angular') 返回的都是undefined 或者不提供角度API。