我继承的角度项目，它具有加载UI的引导，第三方物流企业模块的问题。

对于每一个指令，它试图从引导使用，我得到类似如下的内容：

错误：[$编译：tpload]无法加载模板：模板/日期选择器/ popup.html

我读过有关需要包括用户界面，引导lib中的第三方物流企业版本。 （UI的自举 - 第三方物流企业 - 0.10.0.js（而不是UI-bootstrap.js）），但已经做到这一点，以及模块的每个置换注入到我的模块作为依赖（ui.bootstrap，ui.bootstrap。第三方物流企业，模板/日期选择器/ datepicker.html'），但我不能打败它。

Here're我包括：

 ＆LT; HTML类=无JSNG-应用=hiringApp＆GT;＆LT; HEAD＆GT;    ＆LT;间的charset =UTF-8＆GT;    ＆LT;标题＆GT; @ ViewBag.Title＆LT; /标题＆GT;    ＆LT;间内容=IE =边缘HTTP的当量=X-UA-Compatible的＆GT;    ＆LT;元CONTENT =WIDTH =设备宽度，初始规模= 1.0NAME =视口＆GT;    ＆LT; META NAME =布局CONTENT =IRLayout＆GT;    ＆所述;！ - 样式IRLayout  - ＆GT;    ＆LT;链接rel =stylesheet属性HREF =// cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css\">    ＆所述;！ - 自举 - ＆GT;    ＆LT;链接rel =stylesheet属性HREF =// netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\">    ＆LT;！ - 字体真棒 - ＆GT;    ＆LT;链接HREF =// netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css的rel =stylesheet属性＆GT;    ＆LT;链接rel =stylesheet属性HREF =@ Url.Content（〜/内容/ CSS / layout.css中）＆GT;    ＆LT;链接rel =stylesheet属性HREF =@ Url.Content（〜/内容/ CSS / normalize.css）＆GT;    ＆LT;链接rel =stylesheet属性HREF =@ Url.Content（〜/内容/ CSS /的main.css）＆GT;    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =@ Url.Content（〜/内容/ CSS / Upload.css）＆GT;    ＆LT;链接rel =stylesheet属性HREF =// ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css/＆GT;    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =@ Url.Content（〜/内容/ CSS / Styles.css中）＆GT;    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =@ Url.Content（〜/内容/ CSS /网站specific.css）＆GT;    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =@ Url.Content（〜/内容/ CSS / rating.css）＆GT;    ＆LT;！ - 上传 - ＆GT;    @ *＆LT;链接rel =stylesheet属性类型=文/ CSS的href =@ Url.Content（〜/内容/ Upload.css）＆GT; * @    ＆LT;！ - 头脚本 - ＆GT;    ＆LT;！ -  jQuery和放大器; jQuery用户界面 - ＆GT;    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js\"></script>    ＆LT;脚本的src =@ Url.Content（〜/脚本/供应商/下划线-min.js）＆GT;＆LT; / SCRIPT＆GT;    ＆所述;！ - 自举 - ＆GT;    ＆LT;！ - 验证 - ＆GT;    ＆LT;脚本的src =// ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js\"></script>    ＆LT;脚本的src =// ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js\"></script>    ＆LT;！ - 分析 - ＆GT;    ＆LT;脚本的src =// cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js\"></script>    ＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js\"></script>    ＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js\"></script>    ＆LT;！ - 角 - ＆GT;          ＆LT;！ -           ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js\"></script>          ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js\"></script>          ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js\"></script>          ＆LT;脚本src=\"//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js\"></script>             - ＆GT;    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js\"></script>    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js\"></script>    ＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js\"></script>    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js\"></script>    ＆LT;脚本src=\"//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js\"></script>    ＆LT;脚本的src =@ Url.Content（〜/脚本/ app.js）＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本的src =@ Url.Content（〜/脚本/ controllers.js）＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本的src =@ Url.Content（〜/脚本/ directives.js）＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本的src =@ Url.Content（〜/脚本/ filters.js）＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本的src =@ Url.Content（〜/脚本/ services.js）＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本＆GT;        angular.module（hiringApp）常数（$ userProvider，@ Model.User.SystemRoles）。        angular.module（hiringApp）恒定（$ jobProvider，''）;    ＆LT; / SCRIPT＆GT;    ＆LT;！ - 上传 - ＆GT;    ＆LT;脚本的src =@ Url.Content（〜/内容/ JS / plupload.full.js）＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本的src =@ Url.Content（〜/内容/ JS / UploadImage.js）＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本类型=文/ JavaScript的'SRC ='// ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>    ＆LT;脚本SRC =〜/内容/ JS /音频/ irAudioRecorder.js＆GT;＆LT; / SCRIPT＆GT;    @RenderSection（脚本，必需：false）＆LT; /头＆GT; 

下面是我的应用程序模块：

  VAR hiringApp = angular.module（'hiringApp'，['ui.router'，'ngAnimate'，'ngResource'，'过滤器'，'ui.bootstrap'，'UI .bootstrap.tpls']）; 

下面的错误：

  GET HTTP：//本地主机：54720 /模板/提示/提示-popup.html 404（未找到）angular.js：85397Error：[$编译：tpload]无法加载模板：模板/提示/提示，popup.htmlhttp://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html    在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12    在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17    在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11    在wrappedErrback（http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78）    在wrappedErrback（http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78）    在wrappedErrback（http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78）    在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76    在适用范围。$的eval（http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28）    在适用范围。$摘要（http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31）    在适用范围，适用于$（http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24） 

解决方案

我有一个非常类似的问题，并能得益于它解决​​您的评论，格伦。因此，我想换这个成一个更普遍的答案是希望有助于许多人：

如果UI模板引导加载失败，你已经反复检查已包含the从右边的JS文件（只有它）到应用正确的模块，检查是否模板缓存被禁用/断出于某种原因。

有multiple方法来禁用或清除缓存，一个可能不知道，这是发生在所有。

在我的情况下，模态对话框并不像错误信息打开错误：[$编译：tpload]无法加载模板：模板/莫代尔/ backdrop.html 。

我已经开始了从 从JBoss开发者页面下载一个伟大的模板项目，其中包括了在应用程序中定义以下行：

  VAR xpApp = angular.module（'的KitchenSink'，['ui.bootstrap'，...]）的.config（... {    / *     *使用HTTP拦截到一个随机数添加到从缓存响应每个请求prevent MSIE。     * /    $ httpProvider.interceptors.push（'ajaxNonceInterceptor'）;....factory（'ajaxNonceInterceptor'，函数（）{//这个拦截相当于由$ .ajaxSetup引起的行为（{缓存：假}）;VAR param_start = / \\ /？;返回{    要求：功能（配置）{        如果（config.method =='GET'）{            //添加一个名为_到URL查询参数，等于当前时间戳值            config.url + =（param_start.test（config.url）＆放大器;？？）+'_ ='+新的Date（）的getTime（）;            }            返回配置;        }    }}）; 

在我删除了拦截，该模式对话框，显示。

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) 

I had a very similar issue and was able to resolve it thanks to your comment, Glenn. Therefore I would like to wrap this up into a more general answer that is hopefully helpful to many others:

If UI Bootstrap templates fail to load and you have already double-checked that you have included the right module from the right JS file (and only it) into your app, check if the template cache is disabled/broken for some reason.

There are multiple ways to disable or clear the cache, and one may not be aware that this is happening at all.

In my case modal dialogs weren't opening with error messages like Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.

I had started off from a great template project downloaded from the JBoss Developer page, which had the following lines included in the app definition:

var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
    /*
     * Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
     */
    $httpProvider.interceptors.push('ajaxNonceInterceptor');
...

.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});

var param_start = /\?/;

return {
    request : function(config) {
        if (config.method == 'GET') {
            // Add a query parameter named '_' to the URL, with a value equal to the current timestamp
            config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
            }
            return config;
        }
    }
});

Once I removed the interceptor, the modal dialogs were showing.