使用 Angular 1 与 TypeScript 和 SystemJS 的简单示例

Question

我一直在尝试将 TypeScript Angular 1 应用程序转换为使用 ES6 样式模块导入。

放弃使用 namespace 并使用 import 关键字引入模块。例如

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

但我运行遇到了一些问题。我从 angular:
收到错误未捕获（承诺）错误：（SystemJS）[$injector:modulerr] 由于以下原因无法实例化模块 testApp：
错误：[$injector:modulerr] 由于以下原因无法实例化模块 ngRoute：
错误：[$injector:nomod] 模块 'ngRoute' 不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数

为了说明这个问题，我在 github 上创建了两个应用程序：
1) Angular1WithNamespaces- 我要转换的原始应用程序。
2) Angular1WithSystemJS - 我的转换，有问题。

以下是存在问题的 Angular1WithSystemJS 示例的片段。

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

如能提供帮助，我们将不胜感激。

Answer 1

我通过阅读来自 https://legacy-to-the-edge.com/2015/01/21/using-es6-with-your-angularjs-project/

的博客 post 找到了解决方案

这与我如何为 angular-route 进行导入有关。最后只是改了一行。
在 boot.ts 中，我将导入语句更改为：

import * as angularroute from "angular-route";

至：

import "angular-route";

我只能假设，后者也会运行模块文件中的脚本。
根据 developer.mozilla.org

的导入规范

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

固定版本在githubAngular1WithSystemJSFixed

使用 Angular 1 与 TypeScript 和 SystemJS 的简单示例

Simple Example Using Angular 1 with TypeScript and SystemJS

angularjs

typescript

systemjs