webpack + angular 1.X가 작동하지 않습니다.

Question

기존 angularjs [1.4.7] 응용 프로그램에서 webpack을 사용하려고합니다. webpack을 사용하여 번들로 생성되는 하나의 사용자 정의 모듈이 있습니다. 나중에 다른 일부 모듈에 종속성으로 해당 사용자 정의 모듈을 추가합니다. 번들을 생성하는 동안 오류가 발생하지 않습니다. 하지만이 모듈을 종속성으로 사용할 때 오류가 발생합니다. 나는 가능한 모든 것을 시도했고 여기서 무엇이 잘못되었는지 이해할 수 없다.

오류 이 때문에 모듈의 모듈 2를 초기화 실패 : 오류 : $ 인젝터 : 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']); 

Answer 1

항목에 두 번째 모듈을 추가하십시오 :

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

처음에는 모듈 정의에 도움이됩니다. 또한 귀하의 코드에서 module2에 대한 참조를 보지 못했습니다.