Question

我正在使用现有的（并且正常工作的）Angular 1.5.5应用。它非常小，有一个控制器，一个指令和几个服务，都被分成单独的文件。

我现在想转移到Webpack并对应用程序进行最少量的更改以支持它。我发现的许多Webpack / Angular演示都是关于创建一个内置web包的新Angular应用程序，但我不想重建现有应用程序，只需进行任何更改即可必须使用webpack生成的包。它也使用常规JS，而我见过的大多数教程都是针对ES6的。

我已经安装了grunt-webpack并正在工作，它正在创建bundle.js文件，我可以看到它在Angular，Angular-aria和Angular-animate（我的模块依赖项）

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

未捕获的TypeError：angular.module不是函数

我的webpack任务如下：

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

正如我所说，实际的Webpack捆绑似乎按预期工作并创建bundle.js文件。

主条目文件（app.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变量，它只是一个空对象，即使我可以在包中看到Angular源。

我错过了什么？

Answer 1

您可能会通过本地angular变量隐藏全局var angular属性。试试这个：

(function () {

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

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

将Webpack添加到现有的Angular应用程序

1 个答案: