webpack + angular 1.X不起作用

时间:2017-01-18 21:05:38

标签: angularjs webpack

我正在尝试在现有的angularjs [1.4.7]应用程序中使用webpack。我有一个自定义模块,它使用webpack作为一个包生成。我后来将自定义模块添加为其他模块中的依赖项。生成捆绑包时,我不会收到任何错误。但是当我使用这个模块作为依赖时,它会抛出以下错误。我已经尽了一切可能,并且无法理解这里的错误。

错误 由于以下原因导致无法实例化模块Module2: 错误:[$ injector:modulerr] .......... 由于某些异常导致模块加载失败时会发生此错误。上面的错误消息应该提供额外的上下文。

模块无法加载的一个常见原因是您忘记将文件包含在已定义的模块中,或者文件无法加载。

代码段 webpack.config.js

module.exports = {
    entry: {
        app: [  './src/main/resources/js/app/app.module.js' ]
    },
    output: {
        filename: './src/main/resources/js/app/bundle.js'
    },
    node: {
        module: "empty",
        net:"empty",
        fs: "empty"
    },
    watch: false
};

app.module.js

'使用严格的';

var angular = require('angular');
module.exports = angular.module('module1', [
    require('./components/services').name,
    require('./components/controllers').name,
    require('./components/directives').name

]);

组件/服务/ index.js

   'use strict';
    var angular = require('angular');    
    module.exports = angular.module('services',[])
        .factory('Service1', require('./Service1'))
        .factory( 'Service2' , require('.Service2'))

组件/服务/ service1.js

 module.exports = function Service1( $q) 
{
  var service1 =  {};
  // service implementation
 return service1;
};

组件/控制器/ index.js

'use strict';
var angular = require('angular');
module.exports = angular.module('controllers',[])
    .controller('controller1' , require('./controller1'))
    .controller('controller2' , require('./controller2'));

组件/指令/ index.js

'use strict';
var angular = require('angular');
module.exports = angular.module('directives',['services'])
    .directive('directive1', require('./directive1'))
    .directive('directive2' , require('./directive2'))

的index.html

<script src="bundle.js"  type="text/javascript"></script>

另一个app.js

var app2 = angular.module('Module2',['ui.router','ui.bootstrap','module1']);

1 个答案:

答案 0 :(得分:0)

尝试在条目中添加第二个模块:

entry: {
    app: [  
       './src/main/resources/js/app/app.module.js',
       './src/main/resources/js/app/app.js'
    ]
},

首先有助于定义模块。此外,我在您的代码中没有看到对module2的任何引用。