在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的簡單示例

回答

相關問題