$injector:modulerr Module Error after publishing application on IIS

Question

HI I have issue that appears after publishing AngularJS application on IIS server I believe this has something to do with javascript obfuscation and minification but I don't know how to fix it...

This is how my app.js look like

angular.module('app', ['LocalStorageModule', 'angular-loading-bar', 'smart-table', 'mgcrea.ngStrap', 'ngAnimate', 'ngSanitize', 'ngRoute', 'ui.router', 'LocalStorageModule', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])

.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

    $stateProvider
        .state('home', {
            url: '/',
            layout: 'basic',
            templateUrl: 'views/index',
            controller: 'HomeCtrl'

        })
        .state('putninalozi', {
            url: '/putninalozi',
            layout: 'basic',
            templateUrl: 'views/PutniNalozi',
            controller: 'PutniNaloziCtrl'
        })
        .state('profil', {
            url: '/profil',
            layout: 'basic',
            templateUrl: 'views/profil',
            controller: 'ProfilCtrl'
        })
        .state('login', {
            url: '/login',
            layout: 'basic',
            templateUrl: 'views/login',
            controller: 'LoginCtrl'
        })
        .state('signup', {
            url: '/signup',
            layout: 'basic',
            templateUrl: 'views/signup',
            controller: 'SignUpCtrl'
        })
        .state('otherwise', {
            url: '*path',
            templateUrl: 'views/404',
            controller: 'Error404Ctrl'
        });

    $locationProvider.html5Mode(true);

}])

.config(function ($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
})

.run(['authService', '$templateCache', '$rootScope', '$state', '$stateParams', function (authService, $templateCache, $rootScope, $state, $stateParams) {

    authService.fillAuthData();
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

}]);

And for example one of my controllers looks like this

.controller('LoginCtrl', ['$scope', '$location', '$timeout', '$window', 'authService', function ($scope, $location, $timeout, $window, authService) {

     $scope.loginData = {
         userName: "",
         password: ""
     };

     $scope.message = "";

     $scope.login = function () {

         authService.login($scope.loginData).then(function (response) {

             $location.path('/putninalozi');

         },
          function (err) {
              $scope.message = err.error_description;
          });
     };

 }])

Any idea how to fix this issue ? Thank you for all opinions

my BundleCOnfig.cs looks like this

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/content/css/app").Include("~/content/app.css")
                                                        .Include("~/content/custom.css")
                                                        .Include("~/content/loading-bar.css"));


      //  bundles.Add(new ScriptBundle("~/js/jquery").Include("~/scripts/vendor/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/js/app").Include(
              "~/scripts/vendor/angular.min.js",
              "~/scripts/vendor/smart-table.js",
              "~/scripts/vendor/angular-strap.min.js",
              "~/scripts/vendor/angular-strap.tpl.min.js",                    
              "~/scripts/app.js",
              "~/scripts/vendor/jquery-2.0.3.min.js",
              "~/scripts/vendor/angular-ui-router.js",
              "~/scripts/vendor/loading-bar.js",
              "~/scripts/vendor/angular-animate.js",
              "~/scripts/vendor/angular-route.js",
              "~/scripts/vendor/angular-sanitize.min.js",
              "~/scripts/vendor/angular-local-storage.min.js",
              "~/scripts/vendor/bootstrap.js",
              "~/scripts/controllers.js",
              "~/scripts/filters.js",
              "~/scripts/services.js",
              "~/scripts/directives.js"));
    }
}

Answer 1

I had the same problem, but I think i found the solution. It's look like on local server (from Visual Studio) default option BundleTable.EnableOptimizations is false. But when you publish on IIS on serwer is true. Try to add BundleTable.EnableOptimizations = false in BundleConfig.cs

Answer 2

To enable minification, ensure the following:

• Config.asax, register the BundlesConfig

  protected void Application_Start()
  {
      BundlesConfig.RegisterBundles(BundleTable.Bundles);
  }

• BundleConfig.cs, include the scripts and enable optimizations

  public static void RegisterBundles(BundleCollection bundles)
  {
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/Scripts/jquery-{version}.js"));
  
    BundleTable.EnableOptimizations = true;
  }

• main.html, register the scripts

  @section scripts {
    @Scripts.Render("~/bundles/jquery")
  }
  

• In addition the minification process changes $scope and $q into random variables. Since this does nto tell angular what to inject, the solution is to declare your dependencies wrapped in []:

  angular.module("MyApp")
    .controller("MyCtrl", ["$scope", "$q", function($scope, $q) {
    // your code
  }])
  

This is just the steps you need to enable minification. This is an article on how to actual to this

Answer 3

in you ScriptBundle remove angular.min, angular-local-storage.min and add the unminified versions of them