Simple Example Using Angular 1 with TypeScript and SystemJS

I have been trying to convert a TypeScript Angular 1 application to use ES6 style module imports.

Dropping the use of namespace and using the import keyword to pull in modules. e.g.

import * as angular from "angular";
import * as angularroute from "angular-route";

But I have run into some issues. I'm getting an error from angular:
Uncaught (in promise) Error: (SystemJS) [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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

To illustrate the issue, I have created two applications on github:
1) Angular1WithNamespaces- Original app that I want to convert.
2) Angular1WithSystemJS - My Conversion, that has an issue.

Below are snippets from the Angular1WithSystemJS example that has the issue.

index.html

<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head><base href="/"></head>
<body >
    <ng-view></ng-view>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="configs/systemjs.config.js"></script>
    <script>
      System.import('app/boot');
    </script>
</body>
</html>

systemjs.config.js

System.config({
  defaultJSExtensions: true,

  paths: {
    "npm:*": "../node_modules/*"
  },
  // map tells the System loader where to look for things
  map: {
    "angular": "npm:angular/angular.js",
    "angular-route": "npm:angular-route/angular-route.js",
  },
  meta: {
    'angular': {
      format: 'global',
    },
    'angular-route': {
      format: 'global',
    },
  }
});

boot.ts

/// <reference path="../typings/tsd.d.ts" />
import * as angular from "angular";
import * as angularroute from "angular-route";

let main = angular.module("testApp", ["ngRoute"]);

main.config(routeConfig)

routeConfig.$inject = ["$routeProvider"];
function routeConfig($routeProvider: angular.route.IRouteProvider): void {
    $routeProvider
            .when("/dashboard", {
                templateUrl: "/app/dashboard.html",
            })
            .otherwise("/dashboard");
}

Any help getting this working would be greatly appreciated.

Solution

I have found a solution by reading a blog post from https://legacy-to-the-edge.com/2015/01/21/using-es6-with-your-angularjs-project/

It was related to how I did the import for angular-route. In the end it was just a one-liner change.
In boot.ts I changed the import statement from:

import * as angularroute from "angular-route";

to:

import "angular-route";

I can only assume, that the latter will also run scripts in the module file.
According to the spec on import at developer.mozilla.org

import "my-module";
Import an entire module for side effects only, without importing any bindings.

The fixed version is in github Angular1WithSystemJSFixed