如何讓 angular2 使用 TypeScript 在 Visual Studio 2015 中工作？

我正在努力Angular 2與Visual Studio 2015. Typescript我試圖讓最基本的範例在MVC 5類型 web 項目中工作（web.config而不是config.json）：

import {Component, bootstrap} from 'angular2/angular2';

@Component({
   selector: 'my-app',
   template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

我正在嘗試完成這項工作所需的最簡單的事情。所以我下載了最新的 Angular 2 (alpha .45) 並複制了TypeScript下載modules文件夾中的所有內容。包括所有子文件夾（減去和）。docs``examples

我確信這將Visual Studio像我之前所做的那樣工作，但我正試圖讓它工作，Visual Studio它給了我超過 3,000 個錯誤，看起來這是因為我缺少其他模組或其他東西。

以下是我缺少的幾件事：

地圖（default_keyvalue_differ.ts和許多其他人）：

export class DefaultKeyValueDiffer implements KeyValueDiffer {
 private _records: Map<any, any> = new Map();

斷言（lexer.ts）：

 scanCharacter(start: number, code: number): Token {
   assert(this.peek == code);

設置（command_compiler.ts）：

function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
 var knownPairs = new Set();

開始（ shadow_css.ts）

rule.selector.startsWith('@page')

需要（parse5_adapter.ts）

var parse5 = require('parse5/index');

@reactivex/rxjs/dist/cjs/Rx (async.ts)

export {Subject} from '@reactivex/rxjs/dist/cjs/Rx';

遠不止這些。所以我的第一個問題是，我真的需要所有這些東西，還是其中一些不需要。第二，更重要的是，我如何Visual Studio建構我的解決方案？

注意：我認為這個“非常長的範例/教程”是我正在尋找的，除了它適用於 MVC 6（.NET Core）而不是 MVC 5：http ://chsakell.com/2016/01/01/cross-平台-單頁應用程序-with-asp-net-5-angular-2-typescript/

我知道 SO 並不熱衷於粘貼連結到東西，但這是一個相當大的教程，只需將粘貼複製到這裡……它的所有內容都與回答問題相關。無論如何，這是 Angular 2 團隊提供的讓 NG2 在 Visual Studio MVC 5 中工作的教程：

<https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html>

我想你對npm使用 Visual Studio 2015 的舊版本有問題。我建議你打開 Visual Studio 的輸出視窗並選擇從“Bower/npm”顯示輸出。您將在下圖中看到類似的內容：

輸出中輸入最多的行很長，而且被剪掉了。我把它包括在內：

npm 錯誤！命令 “C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node\node” “C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7 \IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\bin\npm-cli.js” “安裝”

換句話說，了解 Visual Studio 2015 使用目錄中包含npm的一些工具非常重要。C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\ExternalAngular2 有依賴包reactivex/rxjs，它需要"npm":"~2.0.0"，但 Visual Studio 使用舊1.4.9版本（您可以驗證version）"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json"。即使您要安裝最新版本的 Nodejs 和 npm，它也無濟於事，因為 Visual Studio 2015 將使用相同的舊版本的npm.

要解決此問題，我建議您執行以下操作：

• 安裝最新版本的 NodeJs。您可以從<https://nodejs.org/en/>下載它。如果您更喜歡使用 x64 版本，那麼我建議您驗證您是否已經在C:\Program Files (x86)\nodejs. 如果存在 x86 版本，則在開始安裝 x64 版本之前將其解除安裝。之後，您可以安裝 Nodejs。今天它將是 NodeJs 5.0.0 來自node-v5.0.0-x64.msi.
• 然後您可以在管理員模式下啟動命令提示符（它不是 mandotory）並用於npm update -g更新npm或用於npm install -g npm@latest安裝最新版本。我建議您npm -v在安裝之前和之後使用以驗證您安裝的是最新版本。今天是 3.3.12 版本。根據您安裝/更新的npm方式，您可以將其安裝在C:\Program Files\nodejs\node_modules\npm或%AppData%\npm（C:\Users\Oleg\AppData\Roaming\npm例如目錄）或兩個目的地中。
• 您應該在管理員權限下啟動文本編輯器（開始菜單、搜尋、notepad.exe例如鍵入並按Ctrl+Shift+Enter）。之後，您應該修改文件C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd並將內容設置為類似@"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %*或@"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" %*

之後，您可以保存在或部分package.json中的條目 ，安裝將成功。您可能只會看到如下警告"angular2": "^2.0.0-alpha.45"``"devDependencies"``"dependencies"

因為您現在使用“太好”npm的版本：版本 3.3.12 而不是某個2.x.x版本（基於"npm":"~2.0.0"依賴包的規則reactivex/rxjs）。

PS 如果您使用 MVC5 而不是 MVC6 (ASP.NET 5) 的預發布版本，您可能還會收到一些其他錯誤消息，但主要問題是相同的。您必須安裝新版本的 node 和 npm 並修改C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd以使用新版本的 npm。

引用自：https://stackoverflow.com/questions/33473249