when I use ui.bootstrap, onEnter doesn't work - angularjs

Question

I built web app with angular1 and webpack2.
I want to make modal popup with own state so I used ui.router and
ui.bootstrap.
But the problem is, onEnter method doesn't work.
below is my app.js,
and I brought codes about modal at here :
Open Modal and change URL without change the view in AngularJS
import angular from 'angular';
import 'angular-ui-router';
import 'angular-ui-bootstrap';
import 'angular-resource';
// controllers
import homeController from './pages/home/home-controller';
import playerController from './pages/player/player-controller';
import toolbarController from './components/toolbar-controller';
angular.module('907dg', [
'ui.router',
'ui.bootstrap'
])
.config(($stateProvider, $locationProvider) => {
$stateProvider
.state('home', {
url: '/',
template: require('./pages/home/home.html'),
controller: 'HomeController'
})
// modal codes
.state('player', {
url: '/player/:playerName',
onEnter: function($stateParams, $state, $modal) {
console.log('here is player modal');
$modal.open({
template: '<div><h1>PLAYER MODAL POPUP</h1></div>',
resolve: {},
controller: function($scope, $state) {
$scope.ok = function () {
$scope.$close();
};
$scope.dismiss = function () {
$scope.$dismiss();
};
}
}).result.then(function (result) {
// $scope.$close
}, function (result) {
// $scope.$dismiss
}).finally(function () {
// finally
return $state.transitionTo('home');
});
}
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
})
.controller('MasterController', ($scope) => {
$scope.greeting = 'HERE IS INDEX';
})
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
playerController();
homeController();
toolbarController();
and the controller that calls modal.
$scope.show = function (pName) {
$state.go('player', { playerName: pName });
};