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

我一直在尝试将TypeScript Angular 1应用程序转换为使用ES6样式模块导入。在TypeScript和SystemJS中使用Angular 1的简单示例

删除使用命名空间并使用导入关键字来拉入模块。例如

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

任何得到这个工作的帮助，将不胜感激。

来源

2016-11-06 Mike Coxeter

我已经从https://legacy-to-the-edge.com/2015/01/21/using-es6-with-your-angularjs-project/

这是有关我是如何做到的角度路由进口阅读博客中找到了解决办法。最后它只是一个单线的变化。

import * as angularroute from "angular-route";

到：
在boot.ts我从改变import语句

import "angular-route";

我只能假设，后者也将运行在模块文件脚本。
据当时developer.mozilla.org

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

固定的版本上进口的规范是在github上Angular1WithSystemJSFixed

来源

2016-11-07 10:02:30

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

回答

相关问题