CODEWITHSUNDEEP
angularjsgulp
Anudeep GI
Anudeep GI

Reputation: 941

After minification angularjs file using gulp getting Unknown provider: t error?

I am getting this error 

main-d2a9731a79.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: t

Below is my code in angularjs. It worked before minifying. Once minified, it started to give the above error.

app.config(function ($routeProvider) {
    $routeProvider
    // route for the home page
    .when('/', {
        templateUrl: site_url + '/inbox/',
        controller: 'inboxController'
    });
});
app.controller('inboxController',['$scope', '$http', function ($scope, $http) {
    console.log('tesing');
}]);

Upvotes: 0

Views: 1116

Answers (3)

Shushanth Pallegar
Shushanth Pallegar

Reputation: 2862

Make sure you have use ngRoute in your main module also , on Minification strings doesn't get changed .

use ngRoute in your app as dependency

 var app = angular.module('app',['ngRoute']);

config:

app.config(appConfig);

  //inject dependencies for your config constructor function
   appConfig.$inject = ["$routeProvider"];

  //constructor:appConfig
  function appConfig($routeProvider){

   }

u could also use array version to inject dependencies

 app.config(['$routeProvider', function ($routeProvider) {

Upvotes: 1

Joe Clay
Joe Clay

Reputation: 35817

When you minify your code, variables and parameters will be renamed to as few characters as possible - this is one of the ways that the filesize is able to be reduced so much. However, it has the side effect of breaking Angular's dependency injection if you're using the simple syntax, as it can no longer read the parameter names to determine what to inject.

Your options are either to use the array syntax to inject, as you have done in your controller:

app.config(['$routeProvider', function ($routeProvider) {
          $routeProvider
            // route for the home page
            .when('/', {
                templateUrl: site_url + '/inbox/',
                controller: 'inboxController'
            });
}]);
app.controller('inboxController',['$scope', '$http', function ($scope, $http) {
          console.log('tesing');
}]);

Or you can use a tool such as ngAnnotate in your build process, which will convert the simple syntax to one that works with minification automatically. I personally recommend the latter option, as I find the array syntax a lot less readable/easy to maintain.

There's plenty more information on this topic in the Angular developer guide.

Upvotes: 1

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

The problem is that when app.config(function ($routeProvider) { ... }); gets minified to something like app.config(function (t) { ... }); Angular's Dependency Injection mechanism is not able to identify the dependencies correctly. That's why it thrown Unknown provider: t error.

You should always use minification safe syntax to avoid this kind of errors. One way of doing it is: app.config(['$routeProvider', function ($routeProvider) { ... }]);. You can read more about it here: A Note on Minification.

Upvotes: 1

Related Questions