AngularJS (1.6.8) : 모듈을 인스턴스화하지 못했습니다.

Question

여러 모듈로 구성된 AngularJS에서 간단한 응용 프로그램을 만들려고합니다.
app.module.js

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import angularLoadingBar from 'angular-loading-bar'; 
import ngAnimate from 'angular-animate'; 
import selectize from 'selectize'; 
import ngFileUpload from 'ng-file-upload'; 
import wtResponsive from 'angular-responsive-tables'; 
import uiLeaflet from 'ui-leaflet'; 
import angularJwt from 'angular-jwt'; 

import mapModule from './map/map.module'; 

import config from './app.config'; 

angular 
    .module('myApp', [ 
     uiRouter, 
     angularLoadingBar, 
     ngAnimate, 
     selectize, 
     ngFileUpload, 
     wtResponsive, 
     uiLeaflet, 
     angularJwt, 
     mapModule 
    ]) 
    .config(config); 

app.config.js

config.$inject = ['cfpLoadingBarProvider', '$httpProvider', 'jwtOptionsProvider']; 

function config(cfpLoadingBarProvider, $httpProvider, jwtOptionsProvider) { 
    cfpLoadingBarProvider.latencyThreshold = 1000; 
    jwtOptionsProvider.config({ 
     tokenGetter:() => window.token 
    }); 

    $httpProvider.interceptors.push('jwtInterceptor'); 
} 

export default config; 

map.module.js

import angular from 'angular'; 

import mapCtrl from './controllers/map.controller'; 
import routes from './map.routes'; 

export default angular.module('myApp.map', []) 
    .controller('mapCtrl', mapCtrl) 
    .config(routes) 
    .name; 

map.controller.js

import angular from 'angular'; 

mapCtrl.$inject = ['cfpLoadingBar', 'placeService', 'typeService']; 

function mapCtrl(cfpLoadingBar, placeService, typeService) { 

    const vm = this; 
    vm.group_markers = []; 
    vm.select = []; 
    vm.getAllPlaces = getAllPlaces; 
    vm.getAllTypes = getAllTypes; 
    vm.addPlaceInMap = addPlaceInMap; 
    vm.getPlacesByType = getPlacesByType; 
    vm.activate = activate; 

    activate(); 

    function activate() { 

    angular.extend(vm, { 
     grodno: { 
     lat: 53.6834599, 
     lng: 23.8342648, 
     zoom: 13 
     }, 
     markers: {}, 
     tiles: { 
     url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
     options: { 
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
     } 
     } 
    }); 

    vm.myConfig = { 
     create: false, 
     valueField: 'value', 
     labelField: 'text', 
     delimiter: '|', 
     placeholder: 'Choose type object', 
     maxItems: 1 
    }; 
    cfpLoadingBar.start(); 
    vm.getAllTypes(); 
    vm.getAllPlaces(); 
    cfpLoadingBar.complete(); 
    } 

    function getAllTypes() { 
    typeService.getAll() 
     .then(response => { 
     vm.getData = response.data; 
     vm.select.push({ 
      value: 0, 
      text: 'Все объекты' 
     }); 
     if (!response.data) { 
      response.data.forEach(item => { 
       vm.select.push({ 
        value: item.id_type, 
        text: item.name_type 
       }); 
      }); 
     } 
     }); 
    } 

    function getAllPlaces() { 
    placeService.getAll() 
     .then(response => { 
     vm.addPlaceInMap(response.data); 
     }); 
    } 

    function addPlaceInMap(response) { 
    if (!vm.getData) { 
    response.forEach((item, i) => { 
     const typeOfPlace = vm.getData[item.id_type - 1].name_type; 
     const nameOfImage = vm.getData[item.id_type - 1].image; 
     const lat = parseFloat(item.lat); 
     const lng = parseFloat(item.lng); 
     vm.markers['marker' + (i + 1)] = { 
      lat: lat, 
      lng: lng, 
      focus: false, 
      draggable: false, 
      group: 'vm.group_markers', 
      message: '<b>' + 
      item.name_place + 
      ',</b> ' + 
      typeOfPlace + 
      '<br>' + 
      item.address + 
      '<br/>', 
      icon: { 
      iconSize: [54, 54], 
      iconAnchor: [16, 37], 
      popupAnchor: [0, -30], 
      iconUrl: './uploads/' + nameOfImage 
      } 
     }; 
     }); 
     cfpLoadingBar.complete(); 
    } 
    } 

    function getPlacesByType() { 
    vm.typeIsNumber = parseInt(vm.type); 
    cfpLoadingBar.start(); 
    if (vm.typeIsNumber === 0) { 
     vm.getAllPlaces(); 
    } else { 
     vm.markers = {}; 
     placeService.getPlacesByType(vm.typeIsNumber) 
      .then(response => { 
      vm.places = response.data; 
      vm.addPlaceInMap(vm.places); 
     } 
    ); 
    } 
    } 
} 

export default mapCtrl; 

,369,136 내가 브라우저에서 콘솔을 열 때3210

map.routes.js

import mapView from './views/map.html'; 

routes.$inject = ['$stateProvider']; 

function routes($stateProvider) { 
    $stateProvider 
     .state('map', { 
      url: '/', 
      templateUrl: mapView, 
      controller: 'mapCtrl', 
      controllerAs: 'vm', 
      module: 'map' 
     }) 
} 

export default routes; 

는 오류가 발생합니다 :

나는 AngularJS와 1.6.8를 사용하여 내 간단한 응용 프로그램을 작성합니다.
내 질문에 많은 답변을 많이 찾았지만 문제를 해결하는 데 도움이되지 않았습니다.
제발, 도와주세요. 내가 어디에서 실수를했는지 이해할 수 없다.

Answer 1

각 모듈의 정의는 다음과 같이해야합니다 :

angular 
    .module('myApp', [ 
     'ui.Router', 
     'angular-loading-bar', 
     'ngAnimate', 
     'selectize', 
     'ngFileUpload', 
     'wtResponsive', 
     'uiLeaflet', 
     'angularJwt', 
     'mapModule' 
    ]) 

Answer 2

나는 내 문제를 해결. 수동 초기화에 대한 기사를 읽은 후 코드를 변경했습니다. 이제 오류가 없습니다. 기사에 대한
링크 :
https://docs.angularjs.org/guide/bootstrap 내가 app.module.js의 내 업데이트 된 코드를 게시 :

import 'angular'; 
import 'angular-ui-router'; 
import 'angular-loading-bar'; 
import 'angular-animate'; 
import 'angular-selectize2/dist/selectize.js'; 
import 'angular-simple-logger/dist/angular-simple-logger.min'; 
import 'ng-file-upload'; 
import 'angular-responsive-tables'; 
import 'ui-leaflet'; 
import 'angular-jwt'; 
import 'immutable'; 

import mapModule from './map/map.module'; 

const packageModules = [ 
    'ui.router', 
    'angular-loading-bar', 
    'ngAnimate', 
    'selectize', 
    'ngFileUpload', 
    'wt.responsive', 
    'nemLogging', 
    'ui-leaflet', 
    'angular-jwt' 
]; 

function processAllModules(customModules) { 
    angular.element(() => { 
     angular.module('myApp', packageModules.concat(customModules)); 
     angular.bootstrap(document, ['myApp']); 
    }); 
} 

processAllModules([ 
    mapModule 
]); 

나는 내 코드는 누군가를 도울 수 있기를 바랍니다.