Question

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

放弃使用命名空间并使用 import 关键字来提取模块。 e.g。

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

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

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

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

的index.html

＆＃13;

<!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>

＆＃13;

systemjs.config.js

＆＃13;

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',
    },
  }
});

＆＃13;

boot.ts

＆＃13;

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

＆＃13;

非常感谢任何帮助实现这项工作。

Answer 1

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

中的博客文章找到了解决方案

这与我如何进行角度路线的导入有关。最后，这只是一个单线改变在 boot.ts 中，我更改了导入语句：

import * as angularroute from "angular-route";

为：

import "angular-route";

我只能假设，后者也会在模块文件中运行脚本根据{{3}}

的导入规范

导入＆＃34; my-module＆＃34 ;;
仅导入整个模块的副作用，而不导入任何绑定。

固定版本位于github developer.mozilla.org

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

1 个答案: