Unknown provider: uibCarouselProvider when trying to change it's template

Question

I am trying to get angularjs to play nicely with local templates that override bootstrap ones. I had initially use the same file path (uib/template/carousel/carousel.html for example) which is fine when published, but locally it doesn't work.

So, I found this soluton: Angular ui bootstrap directive template missing

They have said you can override the template with a new url with the $provide service. So I have done this:

'use strict';

angular.module('core').config(coreConfig);

function coreConfig($provide) {
    $provide.decorator('uibCarousel', function ($delegate) {
        console.log($delegate[0]);
        $delegate[0].templateUrl = 'bootstrap/carousel/carousel.html';
        return $delegate;
    });
};

which should work. my core module looks like this:

'use strict';

angular.module('core', [
    'ngCookies',
    'ngNotify',
    'ngResource',
    'ngSimpleCache',
    'ui.bootstrap',
    'ui.bootstrap.tpls',
    'ui.router', 
    'ui.select',

    // -- remove for brevity -- //
]);

As you can see, I have the ui.bootstrap.tpls module loaded, so in theory, my code should work. Can anyone think of a reason that it won't?

Answer 1

Sorry for all the comment spam. I think I have found the answer to your issue. You must append Directive to a directive when defining the decorator:

function coreConfig($provide) {
    $provide.decorator('uibCarouselDirective', function ($delegate) {
        console.log($delegate[0]);
        $delegate[0].templateUrl = 'bootstrap/carousel/carousel.html';
        return $delegate;
    });
};

From the docs:

Decorators have different rules for different services. This is because services are registered in different ways. Services are selected by name, however filters and directives are selected by appending "Filter" or "Directive" to the end of the name. The $delegate provided is dictated by the type of service.

https://docs.angularjs.org/guide/decorators

This is an example from my own (working) code:

$provide.decorator("uibDatepickerPopupDirective", [
  "$delegate",
  function($delegate) {
    var directive = $delegate[0];
    // removed for brevity
    return $delegate;
   }
 ]);