Visual Studio 2015 中帶有 .Net Core 的 Angular 2 Hello World 應用程式的快速教程
腳步:
-
建立空 .Net 核心 Web 應用程式:
-
轉到 wwwroot,建立一個名為 Index.html 的普通 html 頁面:
-
配置 Startup.cs 以接受靜態檔案(這將需要在“project.json”檔案中新增“Microsoft.AspNetCore.StaticFiles”:“1.0.0”庫):
-
新增 NPN 檔案:
-
右鍵單擊 WebUi 專案並新增 NPN 配置檔案(package.json):
-
驗證包的最新版本:
注意:如果 visual studio 沒有檢測到軟體包的版本(檢查所有軟體包,因為其中一些確實顯示了版本,而其他軟體包沒有顯示),可能是因為 Visual Studio 中的 Node 版本無法正常工作,因此可能需要在外部安裝節點 js,然後將該安裝與 visual studio 連結。
I。下載並安裝節點 js: https : //nodejs.org/es/download/
II。將安裝與 visual studio 連結: https : //ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii。 (可選)儲存 package.json 後它會在專案中安裝依賴項,否則,使用命令提示符從 package.json 檔案的同一位置執行
npm install
。注意:建議安裝
Open Command Line
,這是可以新增到 Visual Studio 的擴充套件:
-
-
新增 TypeScript:
-
在 WebUi 專案中建立一個 TsScript 資料夾,僅用於組織(TypeScripts 不會進入瀏覽器,它們將被轉換為普通的 JS 檔案,而這個 JS 檔案將是使用 gulp 進入 wwwroot foder 的檔案,這個將在後面解釋):
-
在該資料夾中新增“TypeScript JSON 配置檔案”(tsconfig.json): 並新增下一個程式碼:
-
在 WebUi Project 的根目錄中,新增一個名為 typings.json 的新檔案: 並新增下一個程式碼:
-
在 Web 專案根目錄中開啟一個命令列並執行
typings install
,這將建立一個 typings 資料夾(這需要Open Command Line
作為步驟 4 中的註釋中的可選步驟解釋,數字 iii)。
-
-
新增 gulp 來移動檔案:
- 在 Web 專案的根目錄新增“Gulp 配置檔案”(gulpfile.js):
- 新增程式碼:
-
在
tsScripts
資料夾中新增 Angular 2 引導檔案:app.component.ts
app.module.ts
main.ts
-
在 wwwroot 中,建立下一個檔案結構:
-
在 scripts 資料夾(但在 app 外),新增 systemjs.config.js: 並新增下一個程式碼:
-
執行 Gulp Task 以在 wwwroot 中生成指令碼。
- 右鍵單擊 gulpfile.js
- Task Runner Explorer i。如果未載入任務(“無法載入。請參閱輸出視窗”)。轉到輸出視窗並檢視錯誤,大多數時候是 gulp 檔案中的語法錯誤。
- 右鍵單擊預設任務和執行(這將需要一段時間,確認訊息不是很精確,它顯示它已完成但過程仍在執行,請記住這一點):
-
修改 Index.html,如:
-
現在跑步和享受。
筆記:
- 如果使用 typescript 編譯錯誤,例如
TypeScript Virtual Project
,則表明 Visual Studio 的 TypeScript 版本未根據我們在“package.json”中選擇的版本進行更新,如果發生這種情況請安裝: https : //www.microsoft.com/en-us/download/details.aspx?id = 48593
- 如果使用 typescript 編譯錯誤,例如
參考文獻:
-
Pluorah 中的 Deborah Kurata 的“Angular 2:入門”課程:
https://www.pluralsight.com/courses/angular-2-getting-started-update
-
Angular 2 官方文件:
-
Mithun Pattankar 的文章:
http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/
http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/