CODEWITHSUNDEEP
javascriptjqueryangularjsangular-ui-bootstrap
sonamoo
sonamoo

Reputation: 13

Angular JS, UI-Bootstrap Failed to load template

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;
                    }
                }
            });
    }
}

Upvotes: 0

Views: 1301

Answers (1)

ASLAM TP
ASLAM TP

Reputation: 170

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">

Upvotes: 1

Related Questions