How to use modal with es6 by import

[bellsenawat]

Sorry i am newbie of angular es6

I try to using modal following tutorial by import module like this

import modal from 'angular-ui-bootstrap/src/modal/index-nocss.js';

class AppCtrl {
  constructor() {
    this.url = 'https://github.com/preboot/angular-webpack';
    this.items = ['item1', 'item2', 'item3'];
    this.animationsEnabled = true;
  }

  openModal (size, parentSelector) {
    // var parentElem = parentSelector ? 
    //   angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
    var modalInstance =  $this.modal.open({
      animation: this.animationsEnabled,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: 'ctrl',
      size: 'sm',
      // appendTo: parentElem,
      resolve: {
        items: function () {
          return this.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      this.selected = selectedItem;
    }, function () {
      // $log.info('Modal dismissed at: ' + new Date());
    });
  };
}

AppCtrl.$inject = [modal];

const MODULE_NAME = 'app';

angular.module(MODULE_NAME, [])
  .directive('app', app)
  .controller('AppCtrl', AppCtrl);

export default MODULE_NAME;

I got this error Unknown provider: ui.bootstrap.module.modalProvider <- ui.bootstrap.module.modal <- AppCtrl

[danyim]

@bellsenawat How did you resolve this?

[danfergo]

It seems that there's a bug at

https://github.com/angular-ui/bootstrap/blob/master/src/modal/index-nocss.js

var MODULE_NAME = 'ui.bootstrap.module.modal';

should read

var MODULE_NAME = 'ui.bootstrap.modal';

You can skip the bug by importing angular-ui-bootstrap/src/modal and then import the correct module name "manually".

import uiBootstrap from 'angular-ui-bootstrap'
import uiBootstrapModal from 'angular-ui-bootstrap/src/modal'

export default angular.module(...,
    [
        ...
        uiBootstrap,
        'ui.bootstrap.modal'
    ]

[bluepeter]

use $uibModal now.