angularjs - Enkelt eksempel som bruker Angular 1 med TypeScript og SystemJS

Jeg har prøvd å konvertere en TypeScript Angular 1-applikasjon til å bruke ES6-stil modulinnføringer.

Å slutte å bruke namespace og bruke import-nøkkelordet for å hente inn moduler. f.eks.

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

Men jeg har støtt på noen problemer. Jeg får en feil fra angular:
Ufanget (i løfte) feil: (SystemJS) [$injector:modulerr] Kunne ikke instansiere modul testApp på grunn av:
Feil: [$injector:modulerr] Kunne ikke instansiere modul ngRoute på grunn av:
Feil: [$injector:nomod] Modulen 'ngRoute' er ikke tilgjengelig! Enten har du stavet modulnavnet feil eller glemt å laste det. Hvis du registrerer en modul, sørg for at du spesifiserer avhengighetene som det andre argumentet

For å illustrere problemet har jeg laget to applikasjoner på GitHub:
1) Angular1WithNamespaces - Original appen som jeg vil konvertere.
2) Angular1WithSystemJS - Min konvertering, som har et problem.

Nedenfor er utdrag fra Angular1WithSystemJS-eksemplet som har problemet.

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

All hjelp med å få dette til å fungere vil bli svært satt pris på.

Svar #1

Jeg har funnet en løsning ved å lese et blogginnlegg fra https://legacy-to-the-edge.com/2015/01/21/using-es6-with-your-angularjs-project/

Det var relatert til hvordan jeg gjorde importen for angular-route. Til slutt var det bare en endring på én linje.
I boot.ts endret jeg importsetningen fra:

import * as angularroute from "angular-route";

til :

import "angular-route";

Jeg kan bare anta at sistnevnte også vil kjøre skript i modul-filen.
I henhold til spesifikasjonen om import på developer.mozilla.org

import "my-module";
Importer et helt modul kun for side-effekter, uten å importere noen bindings.

Den faste versjonen er på GitHub Angular1WithSystemJSFixed