Templates cannot be loaded

[artworkad]

Hi,

I have a problem using angular-ui when templates are involved. I use symfony2 as my php framework and angularjs for frontend stuff.

E.g. when I use the dialog I get:

mypage.com/template/dialog/message.html 404 not found

The problem obviously is that angular ui performs a get request for the template. This request seems to be routed to php and fails because there is no such template in the project file system. I use ui-bootstrap-tpls-0.5.0.min.js.

Any ideas how to deal with this problem?

[pkozlowski-opensource]

@artworkad If you include ui-bootstrap-tpls-0.5.0.min.js there should be no HTTP requests for the built-in templates whatsoever - all of them are bundled inside the mentioned file. You can see in this plunker that there are no additional HTTP requests for templates: http://plnkr.co/edit/RB6zMqhw07q1ym7qGBcJ?p=preview\

I presume that you are including both ui-bootstrap-tpls-0.5.0.min.js and ui-bootstrap-0.5.0.min.js which is not needed, see more info about files to include here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

Not sure what the other problem might be apart from additional files included. If you still face the issue please provide a live reproduce scenario with plunker. Closing for now.

[artworkad]

@pkozlowski-opensource 100% sure I am using only ui-bootstrap-tpls-0.5.0.min.js. Here is the error log:

(anonymous function) 944285e_angular.min_2.js:99
n 944285e_angular.min_2.js:95
l 944285e_angular.min_2.js:94
l.(anonymous function) 944285e_angular.min_2.js:96
Dialog._loadResolves 944285e_ui-bootstrap-tpls-0.5.0.min_4.js:1493
Dialog.open 944285e_ui-bootstrap-tpls-0.5.0.min_4.js:1381
DocVerificationCtrl.$scope.openMessageBox d4c690b_part_1_doctor_1.js:144
(anonymous function) 944285e_angular.min_2.js:72
(anonymous function) 944285e_angular.min_2.js:144
e.$eval 944285e_angular.min_2.js:88
e.$apply 944285e_angular.min_2.js:88
(anonymous function) 944285e_angular.min_2.js:144
x.event.dispatch 944285e_jquery-1.10.2.min_1.js:1687
v.handle

seems the error comes from jquery? Any chance to fix that without removing jquery? I am using angularjs only for a part of my ui.

[hallister]

@artworkad We need a plunker of your example to even have an idea what's going on. And I highly recommend not using the minified angular during development. Stack traces with minified angular are vritually impossible to follow.

[artworkad]

Ok here is the log for the uncompressed files:

I am not sure how to reproduce this as plunker...

[hallister]

The only thing I can imagine that would cause that is the templates aren't being included, or the template URL is somehow mangled. 99.9% of the time its because the javascript you are using is the minified one without the templates included. Outside of that I'm at a loss as to what the issue could be.

[artworkad]

@hall5714 http://plnkr.co/edit/eFBgzW6cjqjTL2mOv4Pa?p=preview I added a url to template in $scope.opts however the template (a webpage in this case) is not loaded. Click on open dialog.

[artworkad]

@hall5714 same problem for pagination

[hallister]

Your example at http://plnkr.co/edit/eFBgzW6cjqjTL2mOv4Pa is loading just fine, because you are sending in a template, not a templateURL. A template is treated as a string literal so it simply passes the template into the modal body. That's why modal body on your plunker has a string "http://stackoverflow.com".

If you change the template: 'http://www.stackoverflow.com to templateUrl: index.html you'll notice the index template is now in the modal (you can't use the stackoverflow address because plunker doesn't allow javascript based cross-site loading of html).

[artworkad]

@hall5714 @pkozlowski-opensource I solved the problem. First I had included each module separately like ui.bootstrap.modal, no I just include ui.bootstrap and it works 😋

[sourcec0de]

@artworkad THANK GOD!!!! I was trying to include just ui.bootstrap.modal alone and kept getting that 404 error.

After keyboard smashing for a while and a bit of googling

I found your answer (the holy grail)

Just a thought. To avoid these kind of small things in the future when someone includes the tpls version couldn't these templates be injected in the configure method?

[pkozlowski-opensource]

@sourcec0de no, it is not possible, since in the config phase the $templateCache is not instantiated yet.

[sourcec0de]

@pkozlowski-opensource noted! Thanks

[arvenjadeaguilar]

you can include just the ui.bootstrap.modal alone but make sure you include also the ui.bootstrap.tpls to load the templates :) ie..
var app= angular.module('app', ['ui.bootstrap.typeahead','ui.bootstrap.tpls']);