UI boostrap modal with component cause "One of template or templateUrl options is required." error

Question

I have a separate component js

uploadImage.js

'use strict'

imageListApp.controller('uploadImageController', function ($scope, Upload) {
    var $ctrl = this;

    $ctrl.$onInit = function () {

    }
    $ctrl.ok = function (file) {
        $scope.f = file;

        if (file) {
            file.upload = Upload.upload({
                url: '/api/images/upload',
                data: { title: $scope.picTitle, files: file }
            });

            file.upload.then(function (response) {

                $ctrl.close({ $value: response.data })


            }, function (response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                file.progress = Math.min(100, parseInt(100.0 *
                    evt.loaded / evt.total));
            });
        }
    }

    $ctrl.cancel = function () {
        $ctrl.dismiss({ $value: 'cancel' });
    }

})

imageListApp.component('uploadImage', {
    templateUrl: 'js/components/uploadImage/uploadImage.html',
    bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
    },
    controller: 'uploadImageController'
})

And in other controller js, I use $uib.open to open modal with this component

$scope.openUploadModal = function () {
            var uploadModalInstance = $uibModal.open({
                component:'uploadImage',
                resolve: {
                    title: function () {
                        return $scope.title;
                    }
                }
            });

            uploadModalInstance.result.then(function () {
                console.log("upload success");
            },
            function () {
                console.log("upload cancel");
            })


        }

I ensure all javascript are include properly in index.html

When I invoke the open modal function, I get the errors:

angular.js:14525 Error: One of template or templateUrl options is required.
    at Object.$modal.open (ui-bootstrap-tpls.js:3742)
    at Scope.$scope.openUploadModal (imageListController.js:58)
    at fn (eval at compile (angular.js:15358), <anonymous>:4:165)
    at callback (angular.js:26994)
    at Scope.$eval (angular.js:18161)
    at Scope.$apply (angular.js:18261)
    at HTMLInputElement.<anonymous> (angular.js:26999)
    at HTMLInputElement.dispatch (jquery.js:5206)
    at HTMLInputElement.elemData.handle (jquery.js:5014)

What means of the error and what problem to cause this error?

Answer 1

template (Type: string) - Inline template representing the modal's content.

templateUrl (Type: string) - A path to a template representing modal's content. You need either a template or templateUrl.

Add a template for your modal options (or templateUrl)

Answer 2

you need Versions 2.5.6

npm install angular-ui-bootstrap