Angular JS, UI-Bootstrap Failed to load template

Question

I am trying to use UI bootstrap modal for my project. But I am having problem while loading the template. I saw many posts saying that I have to include the right script file called ui-bootstrap-tpls.js however, I think I might have different problem that I can't find solutions for.

Here are the error messages

angular.js:12701 GET http://localhost:63342/project/app/uib/template/modal/window.html 404 (Not Found)

angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
    at angular.js:88
    at angular.js:20203
    at angular.js:17000
    at m.$digest (angular.js:18182)
    at m.$apply (angular.js:18480)
    at l (angular.js:12501)
    at XMLHttpRequest.s.onload (angular.js:12655)
(anonymous) @ angular.js:14642
(anonymous) @ angular.js:11102
(anonymous) @ angular.js:20207
(anonymous) @ angular.js:17000
$digest @ angular.js:18182
$apply @ angular.js:18480
l @ angular.js:12501
s.onload @ angular.js:12655

angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
    at angular.js:88
    at angular.js:20203
    at angular.js:17000
    at m.$digest (angular.js:18182)
    at m.$apply (angular.js:18480)
    at l (angular.js:12501)
    at XMLHttpRequest.s.onload (angular.js:12655)

here is my code.

app.js

var myApp = angular.module(
    'myApp', 
    ['agGrid','ngMaterial','ngMessages','ui.bootstrap']
);

index.html (this script comes after the angular.js is loaded and before mainController.js is loaded

<script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js">
</script>

mainController.js

myApp.controller('mainController',
    function mainController ($scope, $uibModal, $document) {

function myRowClickedHandler(event) {

        var modalInstance = $uibModal.open(
            {

                animation: true,
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: '../app/myModalContent.html',
                controller: 'ModalInstanceCtrl',
                controllerAs: '$ctrl',
                resolve: {
                    items: function () {
                        return $ctrl.items;
                    }
                }
            });
    }
}

Hi @JeroenHeier, thank you so much for the link! but I added the ui-bootstrap-tpls.js and did not add ui-bootstrap.js file. But it is still not working. — sonamoo
– sonamoo, Commented Jul 24, 2017 at 3:58

ASLAM TP · Accepted Answer · 2017-07-24 03:55:15Z

1

https://plnkr.co/edit/?p=preview

https://angular-ui.github.io/bootstrap/

please refer this. you need to add these dependancies also. please refer the standerd plunker link

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

edited Jul 24, 2017 at 3:55

answered Jul 24, 2017 at 3:49

ASLAM TP

17011 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sonamoo Over a year ago

Hi @ASLAM TP, thank you so much for the help. But I added all the necessary dependencies, but it is not working.

ASLAM TP Over a year ago

can you check you have this window.html template in this path ? /project/app/uib/template/modal/window.html

sonamoo Over a year ago

You saved my day! Thank you. I moved the template folder which has some pre-made templates from UI-Bootstrap from my node_module/angular-ui-bootstrap to app/uib folder and it works! I've never thought that I would manually have to transfer some templates to my project. Thank you again and have a good day!

Collectives™ on Stack Overflow

Angular JS, UI-Bootstrap Failed to load template

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related