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?

Shouldn't it be `$uibCarousel` instead of `uibCarousel`. You are missing the dollar sign — Pop-A-Stash, Jul 06 '18 at 14:02
I see you are correct. I have this same statement in my own code :) — Pop-A-Stash, Jul 06 '18 at 14:13
AngularJS does not complain about unknown provider. Are you sure that it is complaining about this statement, and not another statement somewhere else? Check your injections and make sure it DOES have the dollar sign. — Pop-A-Stash, Jul 06 '18 at 14:16
I would also check your version of Angular UI Bootstrap. In older versions, the providers were not prefixed with `uib`. — Pop-A-Stash, Jul 06 '18 at 14:20
Last thing I would try is appending `Directive` to the end of the provider name: `uibCarouselDirective` — Pop-A-Stash, Jul 06 '18 at 14:25

score 1 · Accepted Answer · answered Jul 06 '18 at 14:29

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

Yes, that was the solution :) – r3plica Jul 06 '18 at 14:57 — r3plica, Jul 06 '18 at 14:57

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

1 Answers1