2015-11-02 70 views
18

我想讓Angular 2Visual Studio 2015中與Typescript一起工作。我試圖獲得最基本的例子在MVC 5類型的web項目工作(的web.config代替config.json):如何讓angular2在使用TypeScript的Visual Studio 2015中工作?

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的下載文件夾中。包括所有子文件夾(減去docsexamples的。)

我相信,這將在Visual Studio外面工作,我已經這樣做過,但我試圖讓它在Visual Studio工作,它給了我超過3000個錯誤,看起來是因爲我錯過了其他模塊或其他東西。

這裏有一對夫婦的事情,我很想念:

地圖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(); 

startsWith(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核心),而不是MVC 5:http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/

+0

我想你必須通過NPM或JSPM安裝角度。原因是,我試圖通過package.json(npm)配置使用Visual Studio自動同步來下載Angular 2(alpha .44)和Angular 2(alpha .45),但它無法成功下載它。 –

+1

我用這個命令'jspm install angular2 es6-shim reflect-metadata zone.js'從這個鏈接:http://html5hive.org/getting-started-with-angular-2/ 它能夠下載角alpha 45與所有依賴關係。試一試 –

+0

因此,確實讓我有類似的感覺,但現在我遇到了一個新問題,我得到了大量的「重複標識符」錯誤,其中超過2000個錯誤。我刪除了所有文件夾,然後運行npm install angular2 es6-shim reflect-metadata zone.js''yhrn最終在'Visual Studio'中將這些文件複製到我的解決方案文件夾中,並在我的項目中包含新文件夾,現在得到所有這些錯誤:(這不應該是這麼辛苦! –

回答

3

我也知道,所以並不熱衷在粘貼鏈接的東西,但這是一個相當大的教程要跟隨,只是複製粘貼到這裏...和它的所有部分是相關的回答這個問題。不管怎麼說,這裏是由角2團隊提供獲得NG2在Visual Studio MVC 5個工作教程:

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

0

我得到它的工作。

npm安裝。從node_modules文件夾中刪除除angular2和systemjs之外的所有文件夾。在angular2文件夾中刪除除捆綁以外的所有內容。在bundles/typings文件夾中刪除除angular2之外的所有文件。

文件夾結構是這樣的:

node_modules 
    -- angular2 
    -- bundles 
     -- typings 
      --angular2 
    -- systemjs 
+1

我根本沒有看到systemjs文件夾,我的bundles/typings文件夾中也沒有angular2文件夾。 angular2文件夾中還有一個src文件夾,我確定會導致它被刪除的問題。你的安裝與我的有何不同?我也用npm。看到[我的問題](http://stackoverflow.com/questions/33568723/visual-studio-typescript-project-with-a-node-package-raises-duplicate-identifier)正是我遇到的問題。 –

14

我想你必須與使用的Visual Studio 2015年的老版本npm問題。我建議您打開Visual Studio的Output窗口並選擇「Bower/npm」的顯示輸出。你會看到類似下面的圖片:

enter image description here

輸出的大部分進口線長,它的切割。我將它包括在內:

npm ERR!命令「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 \擴展\微軟\ WEB 工具\外部\故宮\ node_modules \故宮\ BIN \ NPM-cli.js」, 「安裝」

換句話說,理解重要的是Visual Studio的2015年使用C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External目錄中包含的一些工具npm。 Angular2具有依賴包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。如果x86版本存在,則在開始安裝x64版本之前將其卸載。之後,您可以安裝Nodejs。今天它將是從node-v5.0.0-x64.msi的NodeJs 5.0.0。
  • 然後您可以以管理員模式啓動命令提示符(並非永久性),並使用npm update -g更新npm或使用npm install -g [email protected]安裝最新版本。我建議您在安裝之前和之後使用npm -v以驗證您是否安裝了最新版本。今天它的版本是3.3.12。根據您安裝/更新npm的方式,您可以安裝它或者安裝在C:\Program Files\nodejs\node_modules\npm%AppData%\npm(例如diretcory 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具有"devDependencies""dependencies"部分像"angular2": "^2.0.0-alpha.45"的條目和installetion一定會成功。你可能會看到就像

enter image description here

,因爲你現在用「太好了」版本的npm警告:(基於依賴包reactivex/rxjs的規則"npm":"~2.0.0"版本3.3.12,而不是一些2.x.x版本)。

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

+0

你曾經和vs13一起和angulars一起工作過,或者遇到過一些問題?我嘗試的是vs15。我遇到了「模塊相關」問題。 –

+0

@NeerajSharma:我使用Visual Studio 2015.目錄'C:\ Program Files(x86)\ Microsoft Visual Studio 14.0'對應Visual Studio 2015. – Oleg

+0

謝謝!我一直在尋找解決方案3個小時。 – David

1

我的回答是MVC6(沒看到需要的是MVC5)

我推薦使用啓動模板。我可以推薦它也使用(搜索引擎優化的服務器端渲染和更快的頁面加載)HMR和角度的通用模板:

https://github.com/aspnet/JavaScriptServices

上手度: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

+0

你的答案是'MVC 6'。這個問題是關於'MVC 5'。 –

+0

對不起,我應該刪除嗎? – daniel

+0

這取決於你。 –

相關問題