How to load angular1 dependencies using systemjs? - angularjs

Question

I'm using typescript, angular1 and systemjs in the following example.
The problem that I have is I'm not able to load the dependencies for the module app as in
module('app', ["ngComponentRouter", "hub"])
I see an error in the chrome dev tab that the injecting a module failed.
The System.import loads the app module which supposed to load the hub module also. But how to inject the hub module as a dependency for app module?
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"
}
});
}