如何使用systemjs加载angular1依赖项？

Question

我在以下示例中使用了 typescript ， angular1 和 systemjs 。

我遇到的问题是我无法加载模块 app 的依赖项，如

module('app', ["ngComponentRouter", "hub"])

我在chrome dev标签中看到注入模块失败的错误。

System.import 加载应该加载集线器模块的应用模块。但是如何将 hub 模块作为 app 模块的依赖项注入？

的index.html

<app></app>

<script src="~/lib/system.js/dist/system.src.js"></script>

<script>
    System.config({
        defaultJSExtensions: true,
        baseURL: "wwwroot",
        map: {
            "angular": "/lib/angular/angular.min.js",
            "hub": "/App/hub.js"
        }
    });
    System.import('./App/app');
</script>

app.ts

import * as angular from 'angular';
import * as hub from './hub/hub'

module App {
    "use strict";

    export class AppController {

        static $inject = [
            "$router"
        ];

        constructor(private $router: any) {
            $router.config([
                { path: "/hub", component: "hub", as: "Hub" },
                { path: "/home", component: "home", as: "Home" }
            ]);

            $router.navigateByUrl("hub");
        }

    }

    angular.
        module('app', ["ngComponentRouter", "hub"]).
        controller('AppController', AppController).
        directive('app', () => {
            return {
                restrict: "E",
                template: "<ng-outlet><ng-outlet>",
                controller: "AppController"
            }
        });
}

hub.ts

export module Hub {

    export class Tile {
        title: string;
        name: string;

        constructor(title: string, name: string) {
            this.name = name;
            this.title = title;
        }
    }

    export class HubController {

        selectedTiles: number[];
        hubTiles: Tile[];

        static $inject = [
            "$scope",
            "$router"
        ];

        constructor(private $scope: any, private $router: any) {

            this.hubTiles = [new Tile("USA", "home"),
                new Tile("Canada", "home"),
                new Tile("Mexico", ""),
                new Tile("India", ""),
                new Tile("Germany", ""),
                new Tile("Australia", "")];

            this.selectedTiles = [];

            $scope.$watch(() => this.selectedTiles, (newValue: number[], oldValue: number[]) => {

                if (newValue[0] != oldValue[0]) {
                    $router.navigateByUrl(this.hubTiles[newValue[0]].name);
                }

            }, true);
        }
    }

    var hub = angular.
        module("hub", ["ngComponentRouter", "winjs"]).
        controller("HubController", HubController).
        directive("hub", () => {
            return {
                templateUrl: "./app/hub/hub.html",
                controller: HubController,
                controllerAs: "hub"
            }
        });
}