我一直在尝试将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] 删除。
我来说两句