angularjs - ngbtooltip - ngx-bootstrap
ui-bootstrap-tpls no pudo cargar la plantilla (7)
He heredado un proyecto angular, y está teniendo problemas para cargar los módulos ui-bootstrap-tpls.
Para cada directiva que está intentando usar desde bootstrap, obtengo algo similar a lo siguiente:
Error: [$ compile: tpload] Error al cargar la plantilla: template / datepicker / popup.html
He leído sobre la necesidad de incluir la versión tpls de ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (en lugar de ui-bootstrap.js)), pero al hacerlo así como cada permutación del módulo inyectado en mi módulo como dependencia (ui.bootstrap, ui.bootstrap tpls, template / datepicker / datepicker.html ''), pero no puedo vencerlo.
Aquí están mis incluye:
<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>
Aquí está mi módulo de aplicación:
var hiringApp = angular.module(''hiringApp'', [''ui.router'', ''ngAnimate'', ''ngResource'', ''filters'', ''ui.bootstrap'', ''ui.bootstrap.tpls'']);
Aquí está el 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)
Incluya ui.bootstrap.tpls justo debajo de ui.bootstrap
Para mí, fue el interceptor el que estaba produciendo el error. Tuve que agregar el siguiente código para hacer que ignore las llamadas que no se hicieron a mi api:
if (config.url.indexOf(''templates/'') == 0 || config.url.indexOf(''uib/'') == 0)
{
console.log(''ignoring ''+config.url);
return config;
}
Sí. Resolví este problema de esta manera ... y al incluir ui-bootstrap-tpls.js
angular.module(''mainModule'', [''ui.bootstrap'', ''sub-module'']);
angular.module(''sub-module'', [''ui.bootstrap.modal'']);
Sin embargo, no estoy seguro si otros casos como el almacenamiento en caché de plantillas causarán el problema o no. Al menos no para mi ..
Sólo quiero publicar mi solución para este error.
- incluye la versión tpls de ui.bootstrap
src = "asset / bower_components / angular-bootstrap / ui-bootstrap-tpls.js"
Aparentemente la versión none tpls no incluye esas plantillas.
cuando lo inyecte en su aplicación, asegúrese de inyectar ui.bootstrap y no ui.bootstrap.modal
angular.module ("shiftPlanner", [''ngResource'', ''ngRoute'', ''ui.bootstrap''));
para más información rtfm ;)
También tuve este problema, pero solo estaba usando la versión tpls de ui.bootstrap. En mi caso, el problema fue un módulo de ngCacheBuster memoria caché ngCacheBuster .
En la pestaña de red, pude ver que había un parámetro cachebuster al final de la llamada de recursos:
/template/window.html?cb=4889764132
En este caso, bootstrap no examinó su templatecache, pero decidió cargar el archivo desde esta ubicación, que por supuesto no existía.
Resolví esto haciendo una lista blanca de todas las llamadas a la carpeta de plantillas desde el mecanismo de almacenamiento en memoria caché.
Espero que esto sea de ayuda para cualquier persona que experimente este problema y utilice el almacenamiento en caché.
Tuve un problema muy similar y pude resolverlo gracias a su comentario, Glenn. Por lo tanto, me gustaría resumir esto en una respuesta más general que espero sea útil para muchos otros:
Si las plantillas de UI Bootstrap no se cargan y ya ha verificado que ha incluido rtfm ( y solo este ) en su aplicación, verifique si la memoria caché de la plantilla está deshabilitada / rota por alguna razón.
Hay varias formas de deshabilitar o borrar la memoria caché , y es posible que uno no sepa que esto está sucediendo en absoluto.
En mi caso, los diálogos modales no se abrían con mensajes de error como Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html .
Comencé a partir de un gran proyecto de plantilla descargado de la página JBoss Developer, que tenía las siguientes líneas incluidas en la definición de la aplicación:
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;
}
}
});
Una vez que quité el interceptor, se mostraban los diálogos modales.
asegúrese de haber incluido no solo ui-bootstrap.js, como también ui-bootstrap-tpls.js