TypeScript Angular1アプリケーションをES6スタイルのモジュールインポートを使用するように変換しようとしています。
名前空間の使用をやめ、importキーワードを使用してモジュールをプルします。例えば
import * as angular from "angular";
import * as angularroute from "angular-route";
しかし、私はいくつかの問題に遭遇しました。角度からエラーが発生します：
Uncaught（in promise）エラー：（SystemJS）[$ injector：modulerr]次の理由でモジュールtestAppのインスタンス化に失敗しました：
エラー：[$ injector：modulerr]次の理由でモジュールngRouteのインスタンス化に失敗しました：
エラー：[$ injector：nomod]モジュール 'ngRoute'は利用できません！あなたは、どちらかのモジュール名をスペルミスか、それをロードするために忘れてしまいました。モジュールを登録する場合は、2番目の引数として依存関係を指定してください
：問題を説明するために、私はgithubの上に2つのアプリケーションを作成している
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文を変更しました：
import * as angularroute from "angular-route";
に：
import "angular-route";
後者もモジュールファイル内のスクリプトを実行すると思います。developer.mozilla.org
でのインポートに関する仕様によると
「私のモジュール」をインポートします。
バインディングをインポートせずに、副作用のみのためにモジュール全体をインポートします。
修正版はgithubのであるAngular1WithSystemJSFixed
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加