I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.
For each directive it's trying to use from bootstrap, I get something similar to the following:
Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html
I've read about the need to include the tpls version of the ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.
Here're my includes:
<html class="no-js" ng-app="hiringApp">
<head>
<meta charset="utf-8">
<title>@ViewBag.Title</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="layout" content="IRLayout">
<!-- styles IRLayout-->
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
<!-- BootStrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- font-awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="@Url.Content("~/content/css/layout.css")">
<link rel="stylesheet" href="@Url.Content("~/content/css/normalize.css")">
<link rel="stylesheet" href="@Url.Content("~/content/css/main.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/Upload.css")">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/styles.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/site-specific.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/rating.css")">
<!-- Upload -->
@*<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Upload.css")">*@
<!-- Header Scripts-->
<!-- Jquery & Jquery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="@Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>
<!-- BootStrap -->
<!-- Validate -->
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<!-- Analytics -->
<script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>
<!-- Angular -->
<!--
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="@Url.Content("~/Scripts/app.js")"></script>
<script src="@Url.Content("~/Scripts/controllers.js")"></script>
<script src="@Url.Content("~/Scripts/directives.js")"></script>
<script src="@Url.Content("~/Scripts/filters.js")"></script>
<script src="@Url.Content("~/Scripts/services.js")"></script>
<script>
angular.module("hiringApp").constant("$userProvider", @Model.User.SystemRoles);
angular.module("hiringApp").constant("$jobProvider", '');
</script>
<!-- Upload -->
<script src="@Url.Content("~/content/js/plupload.full.js")"></script>
<script src="@Url.Content("~/content/js/UploadImage.js")"></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
<script src="~/Content/js/audio/irAudioRecorder.js"></script>
@RenderSection("script", required: false)
</head>
Here's my app module:
var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);
Here's the error:
GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
