Javascript 将网页包添加到现有Angular应用程序

我正在开发一个现有的（和正在开发的）Angular 1.5.5应用程序。它非常小，有一个控制器、一个指令和两个服务，都被分割成单独的文件

我现在想转到Webpack，并对应用程序进行最少数量的更改以支持这一点。我发现的很多Webpack/Angular演示都是关于从一开始就使用内置的Webpack创建一个新的Angular应用程序，但我不想重建现有的应用程序，只想做任何必要的更改来使用Webpack生成的捆绑包。它还使用常规JS，而我看到的大多数教程都是针对ES6的

我已经安装了grunt webpack并开始工作，它正在创建

bundle.js

文件，我可以在bundle中看到它正在拉入Angular、Angular aria和Angular animate（我的模块依赖项）

但是，当我运行站点时，我看到一个错误：

未捕获类型错误：angular.module不是函数

我的网页包任务如下：

module.exports = {
    dist: {
        entry: './Static/js/Ng/app.js',
        output: {
            path: './Static/dist/js',
            filename: 'bundle.js'
        }
    }
};

(function () {
    'use strict';

    var angular = require('../vendor/angular.js');
    var ngAria = require('../vendor/angular-aria.js');
    var ngAnimate = require('../vendor/angular-animate.js');

    angular.module('app', [ngAria, ngAnimate]);
}());

正如我所说的，实际的Webpack绑定似乎按照预期工作，并创建了

bundle.js

文件

主条目文件（

app.js

）如下所示：

module.exports = {
    dist: {
        entry: './Static/js/Ng/app.js',
        output: {
            path: './Static/dist/js',
            filename: 'bundle.js'
        }
    }
};

(function () {
    'use strict';

    var angular = require('../vendor/angular.js');
    var ngAria = require('../vendor/angular-aria.js');
    var ngAnimate = require('../vendor/angular-animate.js');

    angular.module('app', [ngAria, ngAnimate]);
}());

如果我注销这个文件中的

angular

变量，它只是一个空对象，即使我可以在包中看到角度源

---

我遗漏了什么？

您可能通过本地

var angular

变量来隐藏全局

angular

属性。试试这个：

(function () {

    'use strict';
    require('../vendor/angular.js');
    require('../vendor/angular-aria.js');
    require('../vendor/angular-animate.js');

    angular.module('app', [ngAria, ngAnimate]);
}());