Failed to load template: template/typeahead/typeahead.html in Ruby on rails app

Instead of using ui-bootstrap.js, you can use ui-bootstrap-tpls.js. This js file comes with the templates.

To use ui-bootstrap-tpls.js you have to add js file to your html:

<script src="/scripts/angular-ui/ui-bootstrap-tpls.js"></script>

AND in your module you have to add these dependencies:

angular.module('myModule', ['ui.bootstrap', 'ui.bootstrap.typeahead']);

If you do these 2 steps you won't get this message anymore:

Failed to load resource: the server responded with a status of 404 (Not Found) _http://localhost:3000/template/typeahead/typeahead.html

What happens often is that people only add the js file and forget to add the dependency to the module.

The GitHub code also contains a folder called template, inside which there is a template folder for typeahead. Have you downloaded that and added to your project at the correct location.

The error seems to be coming due to this typeahead template html file missing. In case it has been added check if location is correct.

You can add the templates to your web page if the ui-bootstrap-tpls.js file doesn't work or if you want to use the ui-bootstrap.js file:

<script type="text/ng-template" id="template/typeahead/typeahead-popup.html"><ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}">        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>    </li></ul></script><script type="text/ng-template" id="template/typeahead/typeahead-match.html">    <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a></script>