Failed to load template: uib/template/modal/window.html

Question

I feel like i have attempted everything and i still get the error:

Failed to load template: uib/template/modal/window.html

in my index file i have added the following:

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

in my app file ive added:

    'ui.bootstrap', 

And in my controller file ive added the following:

$uibModal

and

this.openPayment = function () {
    var modalInstance = $uibModal.open({
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'payment.html',
        controller: 'paymentController',
        controllerAs: '$ctrl',
        size: 'lg',
    });
}

in my paymentController i have added the following:

angular.module('Payment').controller('paymentController', function ($uibModalInstance) {
    var ctrl = this;
});

And payment.html:

    <div class="modal-header">
    <h3 class="modal-title" translate="ACADEMY.EDIT.COURSES.CREATE"></h3>
</div>
<div class="modal-body">
</div>
<div class="lb-modal-footer">
    <a class="btn btn-grey" tooltip="{{ 'TOOLTIP.CANCEL' | translate }}" ng-click="CTRL.cancel()"><i
            class="fa fa-ban"></i></a>
    <button class="btn btn-success m-l-xs {{CTRL.academyCourse.course ? '':'disabled'}}" tooltip="{{ 'TOOLTIP.SAVE_AND_EXIT' | translate }}" ng-click="CTRL.addCourse()"><i
            class="fa fa-check-square-o"></i></button>
</div>

So can anyone tell me what ive done wrong?

Answer 1

1. Make sure you have either attached the template version of ui-bootstrap or the one without.

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

In your case, you're missing the modal template (uib/template/modal/window.html), so I would keep the ui-bootstrap-tpls.js.

2. Make sure you are properly linking to the script, go to the page source and try reaching the uib script, It's possible you have built your project but the script file wasn't added into the build.

3. make sure you are adding the uib script after you add the angular script and after you add the bootstrap files in your index.html

Answer 2

I solve this program buy removing the reference to ui-bootstrap.js, using the reference to ui-bootstrap-tpls.js only, fixed everything.