Getting Error: Unkown provider: $urlMatcherFactory

Question

Unkown provider: $urlMatcherFactory 

This is the error message that Angular throws when I try to inject $urlMatcherFactory in the app config.

I have included the ui-router JS file and have been using it for last few months.

I need to do something like this:

var dateMatcher = $urlMatcherFactory.compile("/day/{start:date}");
$stateProvider.state('calendar.day', {
    url: dateMatcher 
});

as this example shows.

Normally code like this won't identify $urlMatcherFactory. So I tried injecting it as a dependency on the config but then I get this error.

Answer 1

In this Q&A Matching url with array list of words in AngularJS ui-router you can see how to use the $urlMatcherFactory. Also a link to working plunker .

In that example, the $urlMatcherFactory is used in the .run():

  .run(['$urlMatcherFactory',
    function($urlMatcherFactory) {

      var sourceList= ['John', 'Paul', 'George', 'Ringo']
      var names = sourceList.join('|');
      var urlMatcher = $urlMatcherFactory.compile("/{source:(?:" + names + ")}/:id");

      $stateProviderRef 
        .state('names', { 
          url: urlMatcher,
          templateUrl: 'tpl.root.html',
          controller: 'MyCtrl'
        });
    }
  ]);

And that would also mean, that if you are about to use it in a config phase, you should ask for $urlMatcherFactoryProvider (see the Provider at the end)

BUT: using providers in a config phase means - we can configure them. I mean configure the provider itself. To be later evaluable (already configured) in run phase

Configuring Providers

You may be wondering why anyone would bother to set up a full-fledged provider with the provide method if factory, value, etc. are so much easier. The answer is that providers allow a lot of configuration. We've already mentioned that when you create a service via the provider (or any of the shortcuts Angular gives you), you create a new provider that defines how that service is constructed. What I didn't mention is that these providers can be injected into config sections of your application so you can interact with them!

First, Angular runs your application in two-phases--the config and run phases. The config phase, as we've seen, is where you can set up any providers as necessary. This is also where directives, controllers, filters, and the like get set up. The run phase, as you might guess, is where Angular actually compiles your DOM and starts up your app.