Angular UI-Router fails to load template that I didn't ask for

angular-ui, angular-ui-bootstrap, angularjs, javascript

Solution

UI-Bootstrap relies on the presence of templates which are not present in the ui-bootstrap-[version].js file. The build files configuration options are described here. A relevant snippet:

Files with the -tpls in their name have bootstrap-specific templates bundled with directives. For people who want to take all the directives and don't need to customize anything the solution is to grab a file named ui-bootstrap-tpls-[version].min.js. If, on the other hand default templates are not what you need you could take ui-bootstrap-[version].min.js and provide your own templates...

In the plunkr, you are using ui-bootstrap-0.7.0.js, not ui-bootstrap-tpls-0.7.0.js. The former is not bundled with the templates, but still has references to them hard-coded under the directives' templateUrls, for example:

.directive('alert', function() {
  return {
    ...
    templateUrl:'template/alert/alert.html',
    ...
  };
}])

Edit, including @inolasco's answer:

If you use ui-bootstrap-tpls.js and still have this issue, it might be that you need to add

'ui.bootstrap.tpls'

to your module.

Problem

Plunker Code Showing Issue Described Below http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview I am using two components of the AngularUI suite, UI-Router and UI-Bootstrap. UI-Router is responsible for loading templates when the user clicks on my top navbar links. Only the first two links under 'UI Widget Templates' (AngularUI-Bootstrap and Alert) are active UI-Bootstrap is responsible for making nice widgets within the templates. I seem to have UI-Router properly configured in that I am loading the proper templates and those templates have access to the correct controller. The problem I am having is that my UI-Bootstrap components are failing to load and generating odd errors which seem to indicate they are somehow attempting to load templates themselves??? What have I mishandled in my implementation that is keeping the Bootstrap-UI directives from loading? HTML Template for Alert dropdown link ``` <tabset> <tab heading="Static title">Static content</tab> <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled"> {{tab.content}} </tab> <tab select="alertMe()"> <tab-heading> <i class="icon-bell"></i> Select me for alert! </tab-heading> I've got an HTML heading, and a select callback. Pretty cool! </tab> </tabset> {{tabs}} ``` Error Message from console when Alert template loads Angular Goodness ``` angular.module("uiRouterExample", [ 'ui.router', 'ui.bootstrap']).config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/home', templateUrl: 'templates/home.html', controller: 'BSCtrl' }) .state('angularBS', { url: '/angularBS', templateUrl: 'templates/angularBS.html', controller: 'BSCtrl' }) .state('alert', { url: '/alert', templateUrl: 'templates/alert.html', controller: 'BSCtrl' }) ; }) .controller('BSCtrl', function ($scope) { $scope.tabs = [ { title:"Accordion", content:"Dynamic content 1" }, { title:"Alert", content:"Dynamic content 2"}, {title:"Buttons", content:"More Dynamic Content"} ]; $scope.test="Hello World"; $scope.alerts = [ { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, { type: 'success', msg: 'Well done! You successfully read this important alert message.' } ]; $scope.addAlert = function() { $scope.alerts.push({msg: "Another alert!"}); }; $scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); }; }); ```

Original source