webpack + angular 1.Xが動作しない

Question

私は、既存のangularjs [1.4.7]アプリケーションでwebpackを使用しようとしています。 webpackを使用してバンドルとして生成されるカスタムモジュールが1つあります。私は後でそのカスタムモジュールを他のモジュールの依存として追加します。私はバンドルを生成している間、何のエラーもありません。しかし、このモジュールを依存関係として使用すると、以下のエラーが発生します。私は可能な限りすべてを試しましたが、ここで何が間違っているのか理解できません。

エラー はのためにモジュールモジュール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

エントリに2番目のモジュールを追加してみてください：

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

最初にモジュールを定義するのに役立ちます。また、あなたのコードでmodule2への参照がありませんでした。