Visual Studio 2015 中帶有 .Net Core 的 Angular 2 Hello World 應用程式的快速教程

腳步:

  1. 建立空 .Net 核心 Web 應用程式: StackOverflow 文件

  2. 轉到 wwwroot,建立​​一個名為 Index.html 的普通 html 頁面: StackOverflow 文件

  3. 配置 Startup.cs 以接受靜態檔案(這將需要在“project.json”檔案中新增“Microsoft.AspNetCore.StaticFiles”:“1.0.0”庫): StackOverflow 文件 StackOverflow 文件

  4. 新增 NPN 檔案:

    • 右鍵單擊 WebUi 專案並新增 NPN 配置檔案(package.json): StackOverflow 文件

    • 驗證包的最新版本: StackOverflow 文件

      注意:如果 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/StackOverflow 文件 iii。 (可選)儲存 package.json 後它會在專案中安裝依賴項,否則,使用命令提示符從 package.json 檔案的同一位置執行 npm install

      注意:建議安裝 Open Command Line,這是可以新增到 Visual Studio 的擴充套件: StackOverflow 文件

  5. 新增 TypeScript:

    • 在 WebUi 專案中建立一個 TsScript 資料夾,僅用於組織(TypeScripts 不會進入瀏覽器,它們將被轉換為普通的 JS 檔案,而這個 JS 檔案將是使用 gulp 進入 wwwroot foder 的檔案,這個將在後面解釋): StackOverflow 文件

    • 在該資料夾中新增“TypeScript JSON 配置檔案”(tsconfig.json): StackOverflow 文件 並新增下一個程式碼:

      StackOverflow 文件

    • 在 WebUi Project 的根目錄中,新增一個名為 typings.json 的新檔案: StackOverflow 文件 並新增下一個程式碼: StackOverflow 文件

    • 在 Web 專案根目錄中開啟一個命令列並執行 typings install,這將建立一個 typings 資料夾(這需要 Open Command Line 作為步驟 4 中的註釋中的可選步驟解釋,數字 iii)。 StackOverflow 文件 StackOverflow 文件 StackOverflow 文件

  6. 新增 gulp 來移動檔案:

    • 在 Web 專案的根目錄新增“Gulp 配置檔案”(gulpfile.js): StackOverflow 文件
    • 新增程式碼: StackOverflow 文件
  7. tsScripts 資料夾中新增 Angular 2 引導檔案: StackOverflow 文件

    app.component.ts StackOverflow 文件

    app.module.ts StackOverflow 文件

    main.ts StackOverflow 文件

  8. 在 wwwroot 中,建立下一個檔案結構: StackOverflow 文件

  9. 在 scripts 資料夾(但在 app 外),新增 systemjs.config.js: StackOverflow 文件 並新增下一個程式碼: StackOverflow 文件

  10. 執行 Gulp Task 以在 wwwroot 中生成指令碼。

    • 右鍵單擊 gulpfile.js
    • Task Runner Explorer StackOverflow 文件 i。如果未載入任務(“無法載入。請參閱輸出視窗”)。轉到輸出視窗並檢視錯誤,大多數時候是 gulp 檔案中的語法錯誤。
    • 右鍵單擊預設任務和執行(這將需要一段時間,確認訊息不是很精確,它顯示它已完成但過程仍在執行,請記住這一點): StackOverflow 文件
  11. 修改 Index.html,如: StackOverflow 文件

  12. 現在跑步和享受。

    筆記:

參考文獻: