0

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');
}]);
1

3 Answers 3

1

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.

Sign up to request clarification or add additional context in comments.

Comments

1

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.

Comments

1

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) { 

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.