проблема при загрузке при переносе углового приложения 1 для использования модуля-загрузчика

Question

Мне нужно изменить одно из наших угловых приложений 1 для использования модуля-загрузчика (SystemJs), но я столкнулся с проблемой загрузки, и я не уверен, как для правильного решения.

Это, как я загружаю приложение (/app.js):

import angular from 'angular'; 
import './component/module'; 

angular.module('myApp',['component']); 

// bootstrapping stuff... 

Тогда есть определение модуля с материалом маршрутизации из компонента (/component/module.js):

import angular from 'angular'; 
import 'angular-route'; 
import './CompController'; 

export default angular.module('component',['ngRoute']); 

angular.module('component').config(function($routeProvider){ 
    $routeProvider.when('foo/bar',{ 
     templateUrl:'component/template.html', 
     controller:'CompController' 
    }); 
}); 

и контроллер от компонента (/component/CompController.js):

import angular from 'angular'; 

export default angular.module('component').controller('CompController',function(){ 
    // do something useful here... 
}); 

При запуске этого я г и др следующее сообщение об ошибке:

Uncaught (in promise) Error: (SystemJS) [$injector:nomod] Module 'component' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

, который выбрасывается в "CompController", потому что, когда он загружен, как зависимость "component/module", определение углового-модуль 'component' не была завершена.

Может кто-нибудь объяснить мне, как я могу правильно инициализировать контроллер, после того, как модуль доступен? Я делаю некоторые основные ошибки?

Answer 1

Хорошо, у меня есть решение, и это глупо просто: мне пришлось реорганизовать CompController.js, чтобы экспортировать функцию контроллера (функцию чистого JavaScript) вместо объекта контроллера и передать его функции углового контроллера() в module.js, после инициализации модуля.

CompCotroller.js:

export default function(){ // <= export only the pure function 
    // do something useful here... 
} 

module.js:

import angular from 'angular'; 
import 'angular-route'; 
import CompController from './CompController'; // <= load it... 

export default angular.module('component',['ngRoute']); 

angular.module('component').controller('CompController', CompController); // <= ...and create the controller here. That's it :) 

angular.module('component').config(function($routeProvider){ 
    $routeProvider.when('foo/bar',{ 
     templateUrl:'component/template.html', 
     controller:'CompController' 
    }); 
});