Search code examples
angularjsbootstrap-4bootstrap-modaluib

AngularJS, UIB for Bootstrap 4, cannot find and load template


I am using UIBootstrap that supports both AngularJS and Bootstrap 4. The implementation differs from module to module, because we are using redux in half the screen. In one particular screen the template cannot be found.

I know this question has been answered but not for this version, and the other solutions don't work.

Ctrl:

  $scope.openDeleteConditionModal = () => {
    $uibModal.open({
      templateUrl: 'delete-condition-modal.html',
      scope: $scope,
      backdrop: 'static',
      controller: ($uibModalInstance) => {
        $scope.conditionModalClose = () => {
          $scope.modalToggle = () => {
            ctrl.toggleDeleteModal(false);
          };
          $uibModalInstance.close();
        };
      },
    });
  };

  // Open delete modal
  ctrl.deleteExistingCondition = (condition) => {
    ctrl.ConditionToBeDeleted = condition;
    ctrl.toggleDeleteModal(true);
  };

  $scope.$watch(() => ctrl.showDeleteModal, (newValue, oldValue) => {
    if (newValue !== oldValue) {
      if (newValue) {
        $scope.openDeleteConditionModal();
      } else {
        $scope.conditionModalClose();
      }
    }
  });

My file structure:

notifications
|--actions
|--angular
|--|--templates
|--|--|--delete-condition-modal.html
|--|--|--notifications.html

I want to access delete-condition-modal, on a delete button and when I do i GET THIS: angular.js:14525 Error: [$compile:tpload] Failed to load template: templates/delete-condition-modal.html (HTTP status: 404 Not Found)


Solution

  • I'm assuming you are not using ng-templates(packaging up for build).

    You need to change your templateurl path to either:

    templateUrl: 'angular/templates/delete-condition-modal.html',

    or

    templateUrl: 'notifications/angular/templates/delete-condition-modal.html',

    I'm also assuming when you deploy this solution you have copied the files to your build directory.