Module is not defined error angularjs after using webpack

Question

My webpack.config

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: "./main.js", //relative to root of the application
output: {
    path: __dirname,
    filename: "app.bundle.js" //relative to root of the application
},
watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
},
plugins: [
    new HtmlWebpackPlugin({
        hash: true,
        title: 'My Awesome application',
        myPageHeader: 'interviewee',
        template: './_index.html',
        filename: 'index.html' //relative to root of the application
    })
]

}

main.js

    let jquery = require("./Scripts/jquery-1.9.0.js");
    let angular = require("./Scripts/angular.js");
    let ngRoute = require("./Scripts/angular-route.js");
    let bootstrap = require("./Scripts/bootstrap.js");
    let appController = require("./app.controller.js");
    let addController = require("./add.controller.js");
    let service = require("./service.js");
    let messages = require("./Scripts/angular-messages.js")

app.controller

    var MyApp = angular.module("MyApp", [
        'ngRoute',
        'ngMessages',
        'IntervieweeService'
        ]
    );
    MyApp.config(['$routeProvider',
        function ($routeProvider) {
            $routeProvider.
                when('/Add', {
                    templateUrl: 'Views/add.html',
                    controller: 'AddController'
                }).

                otherwise({
                    redirectTo: '/Home'
                });
        }]
    );

add.controller

    MyApp.controller("AddController", function ($scope, EmpApi) { ....... }

When I run the app, I get 'MyApp' is not defined. What am I doing wrong? I am new at both webpack and angularjs. Could you please show me how do I fix this too? Thanks

Answer 1

Change Your controller dependencies in a way that minified version will understand. ie

MyApp.controller("AddController", function ($scope, EmpApi) { ....... }

to

MyApp.controller("AddController", addController);

addController.$inject = ['$scope', 'EmpApi'];

function addController($scope, EmpApi){...};

Answer 2

'MyApp' is not defined in the controller file so you will have to add the controller to the 'MyApp' module

Change

MyApp.controller("AddController", function ($scope, EmpApi) { ....... }

To

angular.module('MyApp').controller("AddController", function ($scope, EmpApi) { ....... }