I am using webpack to the run the AngularJS application. My project is first built using webserver, gulp and livereload. Now while trying to build the project using webpack, I'm facing the below error in the console.
Error: Unknown provider: $locationProvider
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#25abb7">
<!-- font awesome from BootstrapCDN -->
<link href="assets/fa/font-awesome.min.css" rel="stylesheet">
<!-- compiled JS -->
<script type="text/javascript" src="assets/lib/keycloak/keycloak.js"></script>
<script type="text/javascript" src="../js/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<div>
<div ui-view="header"></div>
<div ui-view="main"></div>
<div ui-view="footer"></div>
</div>
Check if your dependency Injection is done right.
Maybe it cannot find the provider because it is minified?
Can you copy your js code ?
Here is an example of how you inject it:
app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
//Do something with the locationProvider
}]);
I think this link might solve your issue How do I access the $locationProvider to configure it?
Related
I'm new to AngularJS. I'm attempting to convert a project I'm working on that used regular Javascript, jQuery, and Bootstrap into an AngularJS single page project and I'd like to keep using the Bootstrap library for it. I followed the instructions and downloaded the necessary files at http://angular-ui.github.io/bootstrap/ but when I try loading my project at http://localhost:5000 I get none of my page loaded and an error in the console. I downloaded angular-ui-bootstrap in my project with the command "npm install angular-ui-bootstrap" from my Node.JS command prompt
In index.html I have tried changing the order of the script and link tags in my head section to no success. I have also tried removing the 'ui.bootstrap' dependency in main.module.js to see if AngularJS works by only loading my 'recipeList' dependency and it does work.
From main.module.js:
angular.module('mainApp', ['ui.bootstrap', 'recipeList']);
From index.html:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="main.module.js"></script>
<script src="recipe-list\recipe-list.module.js"></script>
<script src="recipe-list\recipe-list.component.js"></script>
<title>Sousmate</title>
</head>
<body>
<div id="container">
<header>
<h1>Sousmate</h1>
</header>
<section>
<recipe-list></recipe-list>
</section>
</div>
</body>
</html>
Error: [$injector:modulerr] http://errors.angularjs.org/1.7.8/$injector/modulerr?p0=mainApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.7.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.bootstrap%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.7.8%252F%2524injector%252Fnomod%253Fp0%253Dui.bootstrap%250AF%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A7%253A168%250AHe%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A453%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A25%253A478%250AHe%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A227%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A496%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A43%253A27%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Afb%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A46%253A460%250Ac%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A57%250AUc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A370%250AAe%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A21%253A45%250A%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A348%253A494%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A38%253A444%250A%0AF%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A7%3A168%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A285%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A27%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Afb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A46%3A460%0Ac%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A57%0AUc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A370%0AAe%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A21%3A45%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A348%3A494%0Ab%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A38%3A444%0A
The error is:
Module 'ui.bootstrap' is not available! You either misspelled the
module name or forgot to load it. If registering a module ensure that
you specify the dependencies as the second argument.
From your html I don't see that you've included the angular bootstrap js. You need this file along side your bootstrap css. You can download it here.
e.g.:
<script type="text/javascript" src="ui-bootstrap-tpls-2.5.0.min.js"></script>
Hope this helps!
I`m new in AngularJS
I`m getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
this is index.html file:
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-controller="FirstCtrl">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">{{first.greeting}}</div>
<script src="angular.js"></script>
<script src="app/app.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is app.js file:
var app = angular.module("app", ["ui.router"]).controller("FirstCtrl", function FirstCtrl(){
var first = this;
first.greeting = "First";
});
Please help me to solve this issue
You're not loading in the ui-router script, I don't know if you have it locally or using a cdn, you just need to add it in your index.html there
for example, by adding-
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
in your index.html (this is a cdn link)
Fixed by following steps:
Installed angular-ui-router via npm
npm install angular-ui-router#0.2.18 --save
Then load the script in index.html (angular 1.5.0)
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="angular.js"></script>
This is just the core angular library, you need to either download and host the latest angular ui router library or pull it in from a CDN
see here for more details: https://github.com/angular-ui/ui-router
Can be installed via nuget
PM > Install-Package Angular.UI.UI-Router
I've completed a course on AngularJs through codecademy. I followed the angular-seed steps to set up my own local environment to make my first app, but it appears angular is not initializing on my site. I cant even evaluate a simple expression such as {{3+2}} let alone pull scope values from the controller.
my first steps:
1. clone angular seed from git
2. npm install into directory
3. npm start
my code:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
and here is my module:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
controller:
myApp.controller('MainController', function($scope) {
}
];
});
Any help is greatly appreciated.
thanks
my console errors in chrome are :
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)
http://localhost:8000/app/js/app.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/MainController.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/listinginfo.js Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp
at http://localhost:8000/app/bower_components/angular/angular.js:63:12
at http://localhost:8000/app/bower_components/angular/angular.js:1774:17
at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1698:38)
at module (http://localhost:8000/app/bower_components/angular/angular.js:1772:14)
at http://localhost:8000/app/bower_components/angular/angular.js:4115:22
at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20)
at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4099:5)
at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4025:11)
at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1452:20)
at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1473:12)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1473%3A12)
i figured cloning angular-seed and running npm install would setup everything correctly
It would be hard to tell without checking what errors are being thrown. Have you defined your controller though? Try adding a controller in your module like:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}])
and remove
<!-- Controllers -->
<script src="js/MainController.js"></script>
EDIT:
I tried to run your application without much overhead and it works. My files look something like this:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css"> -->
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<!-- <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
app.js
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
MainController.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
}])
I hope this helps.
Your web server may not have access to read the js files inside your bower_components/angular folder. This has happened to me when one time.
Also like the above comment look at your browser console to see what kind of errors you see. Is MainController defined?
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.
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 just wanna post my solution for this error.
include the tpls version of ui.bootstrap
src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
apparently the none tpls version doesn't include those templates.
when you inject it into you app, make sure you inject ui.bootstrap and not ui.bootstrap.modal
angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);
for more info rtfm ;)
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.
I also had this issue but I was only using the tpls version of ui.bootstrap.
In my case the issue was a cache busting module ngCacheBuster.
In the network tab I could see there was cachebuster parameter at the end of the resource call:
/template/window.html?cb=4889764132
In this case, bootstrap did not look into its templatecache but decided to load the file from this location, which of course did not exist.
I solved this by whitelisting all calls to the templates folder from the cachebusting mechanism.
I hope this will be helpful to anyone experiencing this problem and using cachebusting.
Include ui.bootstrap.tpls right below ui.bootstrap
make sure you have included not only ui-bootstrap.js, as well ui-bootstrap-tpls.js
For me it was the interceptor that was producing the error i had to add the below code to make it ignore the calls that are not made to my api:
if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0)
{
console.log('ignoring '+config.url);
return config;
}
Yep. I solved this issue like this.. and by including ui-bootstrap-tpls.js
angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);
However i am not sure if other cases like template-caching will cause the issue or not. At least not for me..