I have a very simple project in AngularJS 1.7.5 (and tried 6).
I am using system.web.optimization to do my bundling.
When running the project with optimization turned off it works fine.
When I turn on optimizations I get errors presumably from the injection/minification:
Error: $injector:modulerr Module Error
I have removed virtuall everything from the project and when I put a breakpoint in angular.js on errors, the last injection I see happening before I get an error is ngRoute.
I have tried multiple versions, and including the already minified versions.
I have used $inject on everything I can see in my project that would need it.
I have used this project multiple times in older versions of angular. (pre 1.5) and it has worked.
I have stepped through the error handling and it always seems to break on ngRoute or ui-router. Even when including the minified versions.
When I remove the scripts I get different errors (obviously) that the modules are not included.
This project is so simple I can not imagine I am having issues with the /pages/home javascript.
When running locally or published, I get the same error when optimization is turned on, so I am fairly certain this is a minification issue I just can't for the life of me figure out why it is happening.
'use strict';
angular
.module("rpApp", ['ngRoute', 'ui.router'])
.config(function ($routeProvider, $urlRouterProvider, $locationProvider)
{
$locationProvider.hashPrefix('');
$urlRouterProvider
.otherwise('/home');
$locationProvider.html5Mode(true);
})
.run(['$http', function ($http) {
}]);
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
Home Page Using Bootstrap
</div>
</div>
</div>
(function () {
angular
.module("rpApp")
.controller('homeController', homeController);
homeController.$inject = [];
function homeController() {
var vm = this;
}
})();
(function () {
'use strict';
angular.module("rpApp")
.directive('home', homeDirective);
homeDirective.$inject = [];
function homeDirective() {
return {
restrict: 'EA',
replace: true,
scope: {},
require: '?ngModel',
controller: 'homeController',
controllerAs: 'homeVm',
templateUrl: "App/pages/home/home.html",
link: function (scope, elm, atts, c) {
//dom manipulation goes in the link function
}
};
};
})();
(function () {
'use strict';
angular
.module('rpApp')
.config(configRouteHome);
configRouteHome.$inject = [
'$routeProvider',
'$locationProvider'
];
function configRouteHome($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: '<div data-home></div>'
})
.when('/home', {
template: '<div data-home></div>'
});
$locationProvider.html5Mode(true);
}
})();
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js">
</script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui- router.min.js"></script>
<script src="Scripts/ngRoute.min.js"></script>
<%: System.Web.Optimization.Scripts.Render("~/Bundles/angular") %>
<base href="/">
</head>
<body>
<div>
<div ng-view ng-cloak></div>
</div>
</body>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.UI;
namespace Angular1._7
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new
ScriptBundle("~/Bundles/angular").IncludeDirectory("~/app", "*.js",
true));
bundles.Add(new
StyleBundle("~/Bundles/css").IncludeDirectory("~/app", "*.css", true));
BundleTable.EnableOptimizations = true;
}
}
}
I expect the project to bundle and minify with these bare minimum of components added. (ui-router and ng-route) but instead it never seems to reach the /app
Looks like your config function parameters will still be minified?
You'll need to either use the array injection syntax (as you've done for your run method) or use $inject.