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

迈克·考克斯特

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

删除使用的命名空间,并使用进口关键字模块拉。例如

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

但我遇到了一些问题。我是从角得到一个错误:
未捕获(在承诺)错误:(SystemJS)[$注射器:modulerr]未能实例模块testApp由于:
错误:[$注射器: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");
}

任何帮助使这项工作将不胜感激。

迈克·考克斯特

通过阅读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";

我只能假设后者还将在模块文件中运行脚本。
据当时在导入规范developer.mozilla.org

导入“我的模块”;
导入只副作用整个模块,而不导入任何绑定。

固定版本在github Angular1WithSystemJSFixed中

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使Typescript与SystemJS和Angular一起使用?

使用TypeScript,Angular 2和SystemJS进行基于接口的编程

了解TypeScript和SystemJS而无需Angular

使用dplyr简单示例收集和传播

如何在TypeScript和SystemJS中使用momentjs?

使用SystemJS和TypeScript从捆绑的文件中执行模块

使用__setstate__和__getstate__的简单示例

使用多处理队列,池和锁定的简单示例

在简单的 Shiny 示例中使用 group_by 和 checkboxGroupInput

使用 Typescript 和 Jest 的简单获取模拟

TypeScript和SystemJS:Angular ui路由器模块未在已编译的js中注册

Angular 2.2和SystemJS:部署RXJS

Angular 2和SystemJS的循环依赖

需要使用TypeScript,SystemJS和Electron的nodejs“ child_process”

在Angular 5和TypeScript中使用nbind

使用 Angular 和 TypeScript 构建 WebExtension

哪里可以找到angular-xeditable和ajax一起工作的简单示例

Concurrent.futures使用指南-同时使用线程和处理的简单示例

使用Electronic和Systemjs导入节点模块

构建一个使用ld选项-rpath和$ ORIGIN的简单(hello-world-esque)示例

使用System.Data.SQLite和Entity Framework 6的简单示例

使用bluebird和coffeescript的简单promise示例可以工作一半时间

同时使用rand()和rand_r():这个简单的示例正确吗?

使用jersey 2和cdi的简单Web应用程序示例?

如何使用基于类的视图和django-filter的简单示例?

在简单的Angular指令中使用隔离范围-@,&和=

使用RXJS和Angular进行简单的表过滤

SystemJs无法在angular4中使用Windows身份验证和打字稿

在Angular 2中使用SystemJS和Karma加载节点模块