迁移 angular 1 个应用程序以使用模块加载器时的加载顺序问题

Question

我必须更改我们的一个 angular 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'的angular-module定义还没有被完成。

谁能解释一下在模块可用后如何正确初始化控制器？我犯了一些基本错误吗？

Answer 1

好的，我有解决方案，而且很简单：我不得不重构 CompController.js 以仅导出控制器函数（纯 JavaScript 函数）而不是控制器对象并传递在模块初始化后，它进入 module.js 中的 angulars controller() 函数。

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'
    });
});

迁移 angular 1 个应用程序以使用模块加载器时的加载顺序问题

loading order issue when migrating an angular 1 app to use a moduleloader

javascript

angularjs

systemjs

es6-modules