CODEWITHSUNDEEP
c#.netangularjsasp.net-mvc
jtslugmaster08
jtslugmaster08

Reputation: 192

js file isnt found when I put it in a bundle

Current setup in my _Layout.cshtml I have the standard script tag with file path to a few angularjs files like so.

<script src="~/Scripts/angularjs/Controller/MyController.js"></script>...(plus a few more)

So instead of explicitly having all of them in the _layout file I wanted to bundle them. So I did in the BundleConfig.cs like so.

 bundles.Add(new ScriptBundle("~/Scripts").Include(
 "~/angularjs/Factory/authService.js",
"~/angularjs/Controller/MyController.js"));

Everything builds. However when I run it, the browser console window gives me an angular error saying that it can not find my authService.js file. The official error is as follows.

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=authServiceProvider%20%3C-%20authService

So my question is why when I bundle my scripts does it not see the authService file. Bear in mind if I call it explicitly, my angular and webpage works fine with no errors. (I have also messed with the order that I call them in my bundle and I still can not get the webpage to work).

Any help would be greatly appreciated.

Edit: To provide a little bit of angular code here is my service.

(function () {

    var authService = function ($http, $q, localStorageService) {
    /*bunch of code*/
 };

    var module = angular.module("mainApp");

    module.factory("authService", authService);



}());

So I made the following changes but I am still getting the same error along with an additional error in the web browser of "~Scripts/angularjs" responded with 403 error.

(function () {

    var module = angular.module("mainApp");

    module.factory("authService", authService);

    authService.$inject("$http", "$q", "localStorageService");

    var authService = function ($http, $q, localStorageService) {
/*my code*/
};
}());

Final Solution: For clarification I will post what I did in order for it to work. The key was as pointed out by @Tommaso Sebastianelli to pass in the dependencies on the line module.factory in the []. Thanks so much for the prompt response.

(function () {

    var authService = function ($http, $q, localStorageService) {
/*my code here*/

 };
    var module = angular.module("mainApp");

    module.factory("authService", ["$http", "$q","localStorageService", authService]);

}());

Upvotes: 1

Views: 290

Answers (1)

Tommaso Sebastianelli
Tommaso Sebastianelli

Reputation: 193

Is it possible that you have non explicit dependency injection in your angular service? Example:

yourapp.service('authService', function(dependancy1, dependancy2, etc){

});

This kind of error happened to me many times when minimizing and bundling modules. If this is the case fix your code like this:

yourapp.service('authService', ['dependancy1', 'dependancy2', '...',
   function (dependancy1, dependancy2, etc){

}]);

Best option :

yourapp.service('authService', authService);

authService.$inject = ['dependency1', 'dependency2', '...'];

function authService(){
//code here
}

Upvotes: 2

Related Questions