使用 ES6 和 systemjs.import 延迟加载 Angular 模块答案

【问题标题】：Lazy loading angular module with ES6 and systemjs.import使用 ES6 和 systemjs.import 延迟加载 Angular 模块
【发布时间】：2019-05-07 20:50:15
【问题描述】：

我正在尝试使用 system.load 进行基本路由并通过角度解析延迟加载单独的模块。我正在使用带有 ES6 模块加载器的 jspm

基本路由配置是这样的

import "angular";
import "angular-ui-router";

class RouteConfig {

    constructor($stateProvider, $urlRouterProvider){
        this.stateProvider = $stateProvider;
        this.urlRouterProvider = $urlRouterProvider;

        $stateProvider
            .state("index", {
                url: "/",
                templateUrl: "/app/common/templates/home.html",
            })
            .state('order',{
                url:'/order',
                templateUrl:"/app/modules/order/templates/order.html",
                //controller:"order.controller as orderCtrl",
                resolve:{
                    load:()=>{
                        System.import('app/modules/order/order.module');
                        System.import('app/modules/order/order.controller');
                    }
                }
            });

        $urlRouterProvider.otherwise("/");
    };

    static factory($stateProvider, $urlRouterProvider){
        RouteConfig.instance = new RouteConfig($stateProvider,$urlRouterProvider);   
        return RouteConfig.instance;
    };
}

RouteConfig.factory.$inject = ['$stateProvider', '$urlRouterProvider'];

export default RouteConfig;

现在我正在尝试根据必要的模块延迟加载控制器。所以模块和控制器加载为

导入“角度”；导入“angular-ui-router”；

class OrderModule {

    constructor($log,$stateProvider,$urlRouterProvider){
        //$stateProvider
        //    .state('order',{

        //    })

    }

    static factory($log){
        OrderModule.instance = new OrderModule($log,$stateProvider,$urlRouterProvider);
        return OrderModule.instance;
    }
}

angular.module("order.module", ['ui.router']);
OrderModule.factory.$inject = ['$log','$stateProvider','$urlRouterProvider'];
export default  OrderModule;

和控制器

"use strict";

class OrderController {
    constructor() {
        this.order = "Please place an order";
    }
    static factory() {
        OrderController.instance = new OrderController();
        return OrderController.instance;
    }

}

angular.module('order.module').controller('Order.Controller', OrderController);

export default OrderController;

现在当我尝试这个时。这给了我错误

谁能告诉如何加载这个模块。似乎角度模块文件是通过 systemjs 加载的，但它没有注册角度模块。有什么解决办法吗？

【问题讨论】：

标签： angularjs jspm systemjs

【解决方案1】：

尝试使用：

System.import('app/modules/order/order.module')
    .then(function () {
        System.import('app/modules/order/order.controller');
    });

在load()resolve里面

【讨论】：