無法在Visual Studio代碼中使用TypeScript設置Angular 2

我在這裏瘋了。我是JavaScript模塊加載新手，新手Angular和TypeScript新手，我無法弄清楚爲什麼我的安裝程序無法正常工作。請幫忙！無法在Visual Studio代碼中使用TypeScript設置Angular 2

我跟隨了Angular 2網站的quickstart instructions，並且已經能夠獲得一個正在運行的應用程序。下面是關鍵文件

的index.html

<html> 
    <head> 
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
    <script src="https://jspm.io/[email protected]"></script> 
    <script src="js/angular2.dev.js"></script> 
    </head> 
    <body> 
    <my-app></my-app> 
    <script>System.import('./js/app');</script> 
    </body> 
</html>

js/app.js的主要成分和工作上的事情，但他們都非常緩慢。我現在試圖讓我的本地機器上的一切工作，並使用AMD（RequireJS）加載模塊。這是新指數的樣子：

的index.html（第2版）

<html> 
    <head> 
    <script data-main="js/launch" src="js/require.js"></script> 
    </head> 
    <body> 
    <my-app></my-app> 
    </body> 
</html>

launch.js（在同一文件夾中app.js和require.js）

define(["require", "exports", "angular2.dev", "app"], 
    function (require, exports, angular2, app) {});

的應用無法運行並且瀏覽器拋出以下錯誤：
1）Error: Script error for angular2/angular2. http://requirejs.org/docs/errors.html#scripterror
2）TypeError: es6Promise is undefined
我試圖在js/文件夾放置es6-promise.js（從here）和改變launch.js到：

launch.js（第2版）

define(["require", "exports", "es6-promise", "angular2.dev", "app"], 
    function (require, exports, es6Promise, angular2, app) { 
});

...但我得到同樣的2錯誤。我編譯Visual Basic代碼中打字稿與下面的設置：

tsconfig.json

{ 
    "compilerOptions": { 
     "target": "ES5", 
     "module": "amd", 
     "sourceMap": false, 
     "removeComments": true, 
     "noImplicitAny": false, 
     "emitDecoratorMetadata":true, 
     "outDir": "./js", 
     "out": "app.js" 
    }, 
    "files": [ 
     "ts/app.ts" 
    ] 
}

我缺少什麼？爲什麼es6Promise未定義？請幫忙。

來源

2015-07-09 BeetleJuice

感謝您的鏈接。除非我錯過了一些東西，否則我不認爲自己正在處理來自該帖子的同一問題。就我而言，似乎是相同的JavaScript（來自'app。js'）在一種情況下工作，但在另一種情況下不起作用。我不明白如何在我的第一個設置中定義es6Promise對象，但不能在我的第二個設置中定義。 – BeetleJuice

如果你只是想開始使用Angular2和TypeScript，那麼[大量的樣板]（http://www.tryangular2.com/category/Boilerplate）。我會特別推薦Angular2 Webpack Starter。幸運的是，將來安裝過程將變得更加容易。 – shmck

@shmck這是一個很好的資源謝謝！它仍然讓我困惑，爲什麼我的第一個設置上面的工作，但第二個沒有。在我的研究中，我發現'system.js'和'require.js'都是模塊加載器。那麼爲什麼我的'required.js'實現不工作？我只是覺得我錯過了一個基本概念，所以我想我會在這裏問。 – BeetleJuice

那麼，只是不會工作。 Angular 2的加載速度較慢，因爲它需要運行時轉換，因爲它使用es6功能。而爲了運行時的蒸騰作用，你需要包含traceur，它將爲es6-promise提供polyfill。

這就是爲什麼它不起作用，即使你已經建立時間與打字稿編譯你的app.ts。

另外require.js不知道如何自己加載es6模塊，您仍然需要es6模塊加載器polyfill的system.js。

來源

2015-07-16 09:31:06

謝謝！這是第一個幫助我理解的迴應。這是否意味着要使用Angular 2（一旦它在生產中），我們將不得不在瀏覽器中運行一個轉譯器？這似乎違背了Angular團隊對速度的專注。其次，你的回答讓我想知道我們這些想限制依賴關係的人是否必須在ES5中編寫Angular 2，所以我們不需要依賴'System.js'庫。對此有何看法？ – BeetleJuice

不，當然你不會在生產環境中進行運行時間轉換，或者瀏覽器支持ES6，或者它將被編譯時間。 System.js只是一個用於加載ES6模塊的polyfill，一旦瀏覽器支持ES6，也不需要它。最後但並非最不重要的，請標記爲已接受的答案;-) –

這是一個完整的啓動項目，有幾個樣本。現場演示。 http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

希望這會幫助您開始。

來源

2015-07-16 01:06:22 TGH

謝謝。我已經獲得了不同初學者/種子項目的很好鏈接，並且我在搜索過程中遇到了您鏈接的網站！正如我在開篇文章中指出的那樣，我實際上可以讓項目成功運行。我想知道的是爲什麼我的文件的第二個版本不起作用。我想我錯過了一個重要的概念，我希望其中的一個答案能幫助我學習。 – BeetleJuice

無法在Visual Studio代碼中使用TypeScript設置Angular 2

回答

相關問題