15

I have an application which uses angularjs and works fine when optimization is set to false in BundleConfig.cs file.

But when I set optimization to true my angular expression work which means that angular is loading but my services and controller doesn't wotk and other jquery/javscript works fine.

Do you have any idea whats happening here. Below is some of my code

BundleConfig.cs

using System.Configuration;
using System.Web;
using System.Web.Optimization;

namespace HRMS
{
    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 ScriptBundle("~/bundles/angular")
                .Include("~/Scripts/common/angular.js"
            ));
            bundles.Add(new ScriptBundle("~/bundles/app")
                .Include("~/Scripts/angular/app.js"
            ));
            bundles.Add(new ScriptBundle("~/bundles/common")
                .Include("~/Scripts/common/common.js"));

            bundles.Add(new ScriptBundle("~/bundles/services")
                .IncludeDirectory("~/Scripts/angular/services", "*.js"));

            bundles.Add(new ScriptBundle("~/bundles/controller")
                .IncludeDirectory("~/Scripts/angular/controller", "*.js"));


            bundles.Add(new ScriptBundle("~/bundles/jquery")
                .Include("~/Scripts/common/jquery-{version}.js"
                        , "~/Scripts/common/jquery-ui.js"));









            bundles.Add(new ScriptBundle("~/bundles/metis").Include(
                        "~/Scripts/common/plugins/metisMenu/metisMenu.min.js",
                        "~/Scripts/common/sb-admin-2.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/common/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/common/bootstrap.js",
                      "~/Scripts/common/respond.js"));

            bundles.Add(new ScriptBundle("~/bundles/select2").Include(
                      "~/Scripts/common/plugins/select2/select2.js"));

            bundles.Add(new ScriptBundle("~/bundles/tinymce").Include(
                      "~/Scripts/common/plugins/tinymce/tinymce.min.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/sb-admin-2.css",
                      "~/Content/plugins/metisMenu/metisMenu.min.css",
                      "~/Content/font-awsm/css/font-awesome.css",
                      "~/Content/plugins/select2.css",
                      "~/Content/plugins/select2-bootstrap.css",
                      "~/Content/jquery-ui.css"));


            BundleTable.EnableOptimizations =
            bool.Parse(ConfigurationManager.AppSettings["BundleOptimisation"]);

        }

    }
}

My Layout Page:

<!DOCTYPE html>
<html lang="en" ng-app="allyhrms">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>@ViewBag.Title - Ally HRMS</title>

        @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/common")


@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/app")
@Scripts.Render("~/bundles/services")
@Scripts.Render("~/bundles/controller")



@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/metis")
@Scripts.Render("~/bundles/tinymce")
@Scripts.Render("~/bundles/select2")
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    @RenderSection("Script", false)
</head>

App.js // for angular application

(function () {
    var ally = angular.module('allyhrms', []);
})();

My services are made with this style. for example one of my service is like. LocationService.js

angular.module('allyhrms').service('LocationService', function ($http) {
    this.States = function () {
        return GetData($http, "/Location/States", {});
    };
    this.Cities = function (model) {
        return PostData($http, "/Location/Cities", { s: model });
    }
});

LocationController.js

angular.module('allyhrms').controller('LocationController', [
    'LocationService', 'ExceptionService', '$scope', function (locationService, exceptionService, $scope) {
        $scope.State = {
            Id: 0,
            StateName: ''
        };
        $scope.City = {
            Id: 0,
            StateId: 0,
            CityName: ''
        }
        $scope.States = [];
        $scope.Cities = [];
        function loadData() {
            locationService.States().then(function(response) {
                $scope.States = response.data.model;
            });

        }
        loadData();
        $scope.onStateChanged = function() {
            locationService.Cities($scope.State).then(function(response) {
                $scope.Cities = response.data.model;
            });
        };
    }
]);

2 Answers 2

26

This is a very common problem that happens when using inline annotation for injecting the dependencies, rather than using an Array of strings.

So if you are doing this:

.controller('dummyController', function($scope){...})

You should be doing this:

.controller('dummyController', ['$scope', function($scope){...}])

For example: in your code you are doing this, which won't work well when the code gets minified:

angular.module('allyhrms').service('LocationService', function ($http) {
    this.States = function () {
        return GetData($http, "/Location/States", {});
    };
    this.Cities = function (model) {
        return PostData($http, "/Location/Cities", { s: model });
    }
});

You should be doing it like this instead:

angular.module('allyhrms').service('LocationService',['$http', function ($http) {
    this.States = function () {
        return GetData($http, "/Location/States", {});
    };
    this.Cities = function (model) {
        return PostData($http, "/Location/Cities", { s: model });
    }
}]);
2
  • 1
    lol.. i just figured that out, and was here to remove this question, but you already answered it, Bravo :) Nov 3, 2014 at 18:08
  • This is perfect! Thanks!
    – Parth
    Jun 28, 2016 at 11:21
1

For me the problem was that my selec2.js and select2.min.js files were different, enabling optimization or disabling debug caused ASP.NET to use select2.min.js which in fact was incompatible with my framework and caused it to become invisible and throw error.

updating select2.min.js solved my problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.