2. 程式人生 > >用於Visual Studio的ASP.NET Core + Angular 2模板

用於Visual Studio的ASP.NET Core + Angular 2模板

阿新 • • 發佈：2018-11-08

用於Visual Studio的ASP.NET Core + Angular 2模板

既然ASP.NET Core，Angular 2和TypeScript 2都已經發布了最終版本，那麼現在是將它們全部組合到一個功能強大的富Web應用程式平臺中的好時機。

釋出於2016年10月4日

很多個月以來，我一直在GitHub倉庫上與一些優秀的社群貢獻者合作，以構建支援庫，包，最終我們希望這些應用程式是理想的起點模板。除了在ASP.NET Core上託管TypeScript編碼的Angular 2站點的基礎知識外，該模板還包括：

  • 伺服器端預呈現，即使在瀏覽器下載JavaScript程式碼之前，您的UI也可以非常快速地顯示出來
  • Webpack中介軟體整合，因此在開發過程中，您不需要繼續重建客戶端應用程式，甚至不必在後臺執行觀察程式工具
  • 熱模組更換，以便在開發期間，無論何時編輯TypeScript檔案，CSS檔案或其他客戶端資源，您的更改都會立即推送到瀏覽器中而無需重新載入頁面（因此您不會丟失活動的除錯會話等）
  • 快速而精益的構建。在開發過程中，您不必每次更改自己的程式碼時都等待webpack重新分析第三方程式碼，因為我們將第三方程式碼分解為單獨的捆綁包。此外，在開發過程中，您的超快速構建包括完整的源對映以幫助除錯，而在生產中，您可以獲得最小的縮小輸出。在釋出到生產期間，它會自動使用生產版本。

如果你想使用不同的框架怎麼辦？

你更喜歡React，React + Redux還是Knockout？我們也為那些製作了等效的Yeoman模板。

如果您想使用其他IDE或在Linux或Linux上開發，該怎麼辦？ OS X.蘋果系統？如果你沒有在Windows上使用Visual Studio，那很好：使用我們的Yeoman生成器來獲得與VS Code或任何作業系統上的任何其他編輯器一起使用的等效Angular 2，React，React + Redux或Knockout專案。畢竟，.NET Core是完全跨平臺的。

安裝

首先確保已安裝這些先決條件。沒有他們，事情就行不通！

現在您已經檢查了安裝的先決條件，只需下載並安裝ASP.NET Core Template Pack擴充套件。

ASP.NET核心模板包

建立和執行專案

當您具有上面列出的先決條件並安裝了ASP.NET Core Template Pack擴充套件時，您可以轉到Visual Studio的File New Project選單，展開Web類別，然後選擇ASP.NET Core Angular 2 Starter Application（.NET Core） ）：

檔案新選單

為專案命名，然後單擊“ 確定”。

現在，耐心等待Visual Studio恢復所有Node.js（NPM）依賴項！如果您的網際網路連線速度不快，可能需要幾分鐘時間。

恢復依賴關係

此時，您可能會遇到看起來像問題的東西，但實際上並非如此。當Visual Studio完成還原NPM依賴項時，它將顯示“ 依賴項 - 未安裝 ”：

未安裝依賴項

但是，VS錯了！您看到列出的軟體包及其版本號就意味著它們已安裝。在這種特殊情況下，您可以忽略“未安裝”訊息，但如果它足夠困擾您，您可以按照Hanselman的步驟進行修復。

您現在可以執行您的專案。如果您沒有使用鍵盤快捷鍵，請按Ctrl + F5啟動而不進行除錯（與任何其他VS專案一樣），或點選工具欄中的“播放”圖示（標記為IIS Express）。它會出現：

模板主頁

伺服器端預渲染

點選入門網站。你會發現一些使用Angular 2構建的簡單元件的例子。看起來似乎並不多，但幕後發生了一些很酷的事情。

第一件事是，即使這是一個通常在瀏覽器中執行的Angular 2應用程式，你的ASP.NET核心伺服器也可以在伺服器上執行它，所以它只是將普通的HTML傳送到瀏覽器甚至沒有需要JavaScript才能顯示。

要向您自己證明這一點，請嘗試在瀏覽器中完全禁用JavaScript（對於Chrome使用者，請開啟開發人員工具，按F1，選中“ 禁用JavaScript”框，然後重新載入頁面，同時開啟開發人員工具）：

禁用JavaScript

您會發現您的應用程式與以前一樣，即使您的瀏覽器無法執行任何客戶端程式碼。您仍然可以通過單擊側欄連結進行導航。但請注意：導航是唯一可行的，因為這是一個基本的HTML功能。在“計數器”螢幕上，如果單擊它，您會發現計數器按鈕不起作用，因為它連線到JavaScript事件處理程式，而您現在還沒有JavaScript。

那麼伺服器端預渲染有什麼意義呢？

關鍵是不支援沒有啟用JavaScript的瀏覽器。這隻適用於您的應用程式除導航之外沒有任何功能的極端情況（在這種情況下，您為什麼要將其構建為SPA？）。

真正的好處是：

  1. 它可以顯著改善使用者的感知效能。即使他們使用慢速裝置和慢速網際網路連線，他們也可以在幾分之一秒內看到您的應用程式的使用者介面，或者閱讀您正在展示的任何資訊。在後臺，您的潛在大型JavaScript包在後臺下載，解析和執行，然後自動接管以使您的應用程式在客戶端上完全正常執行。這比在應用程式載入時顯示空白螢幕要好得多。
  2. 它支援可能無法執行JavaScript的Web爬網程式。就任何搜尋引擎而言，您只是返回普通的舊HTML，因此可以以正常方式對您的站點進行爬網和索引。

伺服器端呈現存在限制。值得注意的是，您的應用程式程式碼不能僅僅假設它始終在瀏覽器中執行。如果您嘗試直接引用瀏覽器的DOM，您將收到類似於window is undefined伺服器端執行時的錯誤。幸運的是，這很少是一個問題，因為在一個架構良好的Angular應用程式（或React等）中，框架真的不希望你直接搞亂DOM，所以你不應該假設瀏覽器原語而不管伺服器邊渲染。

如果由於某種原因不想使用伺服器端預呈現，請通過asp-prerender-module從<app>元素中刪除該屬性來禁用它Views/Home/Index.cshtml。

Webpack整合

此應用程式中的程式碼是用TypeScript編寫的。這意味著您需要一個構建步驟才能執行。如果您使用SASS（編譯為CSS）或希望將您的庫程式碼捆綁和縮小，情況也是如此。

如今，現代JavaScript應用程式的主要構建系統是Webpack。它就像Grunt或Gulp，但是2016年。它處理TypeScript編譯，捆綁和縮小，以及人們為其提供外掛的大約一百萬個其他東西。我們在模板中使用它，它可以實現一些很酷的功能：

Webpack dev中介軟體

通常，每當您更改其中一個TypeScript檔案時，您必須webpack在命令列上執行以重新生成已編譯的JavaScript檔案wwwroot/dist。但是webpack dev中介軟體功能可以省去你這樣做的麻煩。

如果您的應用程式在開發模式下執行（預設情況下從Visual Studio啟動時），則Webpack將在後臺執行並攔截任何檔案請求http://yoursite/dist。它通過返回將在該位置的編譯檔案來處理任何此類請求，從而考慮您對原始檔所做的任何更改。

因為Webpack編譯器在記憶體中保持活動狀態，所以它能夠在通常構建時間的一小部分（通常大約十分之幾秒）內生成遞增編譯的更新，因此您的開發體驗不會中斷，否則會的。

熱模組更換（HMR）

您知道每次更改內容時必須重新載入頁面是多麼令人難以置信的拖累？好吧，我承認這不是人類痛苦的頂峰，但是如果你正在進行除錯會話，或者在瀏覽器的記憶體中有狀態會在重新載入時丟失，這是浪費時間。

HMR解決了這個問題。當您在開發模式下執行時，它預設啟用，並且它會監視Angular應用程式原始檔（TypeScript，HTML，CSS等）的任何更改。當某些內容發生變化時，它會使用記憶體中的Webpack編譯器例項進行快速增量編譯，並將更改推送到任何活動的瀏覽器視窗。您的應用程式將在不重新載入頁面的情況下即時更新。

要檢視此工作，請在開發模式下開啟瀏覽器的除錯控制檯（例如，從Visual Studio啟動）。你會看到這個訊息：

除錯控制檯中的HMR訊息

看[HMR] connected？這意味著它已準備好接收更改。嘗試編輯您的一個原始檔。例如，ClientApp/app/components/home/home.component.html在這個美麗的動畫GIF中編輯：

除錯控制檯中的HMR訊息

如果編輯CSS甚至是通過Webpack require語句載入的影象，則同樣有效。

配置webpack

您將在專案根目錄中找到Webpack配置檔案，名為webpack.config.js和webpack.config.vendor.js。現在，Webpack是一個強大而複雜的工具，足以寫出整本書。所以如果乍一看並不是很明顯，請不要失望。如果你真的想要自定義它，請準備花些時間學習Webpack。

關於它如何在這個專案中設定的唯一值得注意的事情是我們將第三方依賴程式碼（即“供應商”程式碼）拆分成一個由webpack.config.vendor.js檔案控制的單獨包。這使得重建速度更快，因為Webpack不必在每次構建時重新分析像Angular 2這樣的大型庫。

您可以向您新增額外的第三方依賴項webpack.config.vendor.js，如下例所示。無論何時，請webpack --config webpack.config.vendor.js在命令列上執行以更新供應商捆綁包。如果需要，首先執行安裝Webpack命令列工具npm install -g webpack。

新增第三方庫

如今，大多數JavaScript庫都是在NPM上釋出的。這些庫很容易包含在您的專案中（假設它們與您選擇的其他技術一起使用，例如Angular 2）。

例如，假設您要使用Font Awesome，即“標誌性字型和CSS工具包”。在Visual Studio中，開啟package.json檔案，然後新增"font-awesome": "^4.6.3"到列表中。Visual Studio將自動完成包名稱並建議您當前的版本號。現在儲存已編輯的package.json檔案，VS將獲取並安裝新的NPM依賴項。或者，您可以npm install --save font-awesome在命令列上執行。

package.json中的Font Awesome

現在讓我們將它新增到供應商包中。開啟你的webpack.config.vendor.js檔案，並稱為陣列內vendor（包括一'@angular/common'，'@angular/compiler'等），新增font-awesome/css/font-awesome.css。順序無關緊要，但字母順序很好：

供應商配置中的字型很棒

我們怎麼知道參考font-awesome/css/font-awesome.css？好吧，如果它是一個JavaScript庫，你只需引用包名（例如，moment對於Moment.js）。但是，因為我們想要的font-awesome是CSS檔案（以及CSS檔案引用的其他內容，例如字型或影象），我們提供了我們想要的CSS檔案的路徑，如Font Awesome文件所指定的。

接下來，重建wwwroot/dist/vendor.js捆綁包很重要。我們不會一直自動重建這個，因為它需要一點時間（可能是10秒）。因此，在命令提示符下，在專案根目錄下執行webpack --config webpack.config.vendor.js。如果您尚未安裝該webpack工具，則需要先執行npm install -g webpack。

Webpack輸出

現在，Font Awesome的CSS檔案（以及其他依賴項，如字型或SVG檔案）位於供應商包中，因此現在您可以使用它。例如，ClientApp/app/components/navmenu/navmenu.component.html你可以使用Font Awesome的“計算器”圖示：

Font Awesome用法示例

...它會顯示在您的頁面上：

Font Awesome使用輸出

注意：如果您收到類似的訊息Uncaught ReferenceError: vendor_1e69f8aba84bb345782b is not defined，那是因為（1）您忘了執行webpack --config webpack.config.vendor.js或（2）您這樣做了，但還沒有重新啟動您的應用程式。由於供應商檔案更改很少並需要一些處理時間，因此我們不會自動重建它們或將它們與HMR整合，因此在極少數情況下修改供應商包內容時，您需要自己重建並重新啟動ASP .NET application.ke

釋出到Azure

在部署之前，您需要解決我們即將修復的模板中的錯誤。我們（即我）忘記包含webpack-dev-externals在NPM依賴項列表中，並且在釋出期間確實需要它。

轉到package.json，並在依賴項列表中新增"webpack-node-externals": "^1.4.3"。

現在讓我們部署

您可以使用任何常規部署機制將使用此模板建立的應用程式釋出到任何ASP.NET Core主機。對於那些特別想要部署到Azure的人來說，這是一種方法。

首先，從Azure門戶建立一個新的Web App。

重要！指定Node.js版本如果不這樣做，它將使用舊版本，部署將失敗。轉到新Web應用程式的“ 應用程式設定”窗格，您將看到一個名為的配置條目WEBSITE_NODE_DEFAULT_VERSION。編輯值，輸入最近的Node.js版本，例如6.7.0：

Azure配置節點版本

儲存該更改後，轉到Deployment Credentials配置窗格，然後輸入一些新憑據。

Azure部署憑據

然後，在“ 部署選項”下，設定“ 本地Git儲存庫”。

Azure部署選項

在此之後，當您轉到Overview時，您將能夠複製新的Git克隆URL。

Azure部署Git URL

回到在您的角2的應用程式的根命令提示（包含目錄ClientApp，Startup.cs等等），初始化一個GIT中回購：

<span style="color:#4b505a"><span style="color:#4b505a"><code>git init
git add .
git commit -m "My first commit"
</code></span></span>

您現在可以remote使用之前從Azure門戶獲得的“Git clone url” 將Azure新增為Git倉庫：

<span style="color:#4b505a"><span style="color:#4b505a"><code>git remote add azure https://[email protected]:443/my-angular2-site.git
</code></span></span>

顯然，不要只是複製和貼上上面看到的內容 - 將URL替換為您自己的Web App的URL。

現在，您可以將當前版本的應用推送到Azure：

<span style="color:#4b505a"><span style="color:#4b505a"><code>git push --set-upstream azure master
</code></span></span>

輸入您剛剛選擇的憑據，然後等待部署進行時等待。第一次部署將需要幾分鐘。完成後，請訪問您網站的網址，並對您的精彩創作感到滿意！

反饋

如果您對該專案的範圍和方向有一般性意見，請在下面釋出！我很想知道這對你有用（或不對）。正如我上面提到的，如果您正在為React，React + Redux或Knockout尋找類似的專案模板，或者如果您不使用Windows或Visual Studio，那麼您不會被排除在外：您可以使用我們的Yeoman生成器代替。

或者，如果您遇到任何特定問題並認為您發現了錯誤，請在Github上提交問題（請不要將其作為對此部落格帖子的評論釋出）

http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

相關推薦

用於Visual Studio的ASP.NET Core + Angular 2模板

用於Visual Studio的ASP.NET Core + Angular 2模板 既然ASP.NET Core，Angular 2和TypeScript 2都已經發布了最終版本，那麼現在是將它們全部組合到一個功能強大的富Web應用程式平臺中的好時機。 釋出於2016年10月4日 很多

在.net Core 使用PDF模板文件生成PDF文件,代替WEB打印控件!

cnblogs bat dex make io流 控件 文本框 找到 public 這幾天找WEB打印控件,要麽收費的,要麽免費的只能在IE裏用! 我只想簡單的打個標簽紙!百度2天,看到一老兄說可以用PDF,然後又開始百度..找到了一篇文章 http://www.jians

Linux環境安裝.Net Core SDK 2.0

yum 2.0 img mic oca tar.gz .cn log .tar.gz 1.安裝libicu依賴 yum install libunwind libicu 2.下載SDK2.0 wget https://download.microsoft.com/d

學習ASP.NET Core Razor 編程系列五——Asp.Net Core Razor新建模板頁面

post方法 頁面布局 解決 文件 捕獲 create 內容 接下來 添加 學習ASP.NET Core Razor 編程系列目錄 學習ASP.NET Core Razor 編程系列一 學習ASP.NET Core Razor 編程系列二——添加

【視頻】ASP.NET Core MVC 2.* 入門

配置 page bili http www 三方庫 play help uget 比較初級的入門教程，網址在B站：https://www.bilibili.com/video/av33728783/ 內容如下： 1. ASP.NET Core 簡介和開發工具 2. A

【緊跟時代】建立asp.net core angular專案

需要安裝node.js，如何安裝請自行百度  1、使用vs2017 建立專案，選擇ASP.NET Core Web應用程式，名稱為：ASPNetAngularDemo 選擇angular專案，可以看到是 .NET Core  版本：ASP.NET Core 2.0 

Asp.net core實戰2: 開發工具及常用指令

如果你願意,完全可以使用notepad進行開發,不過也有可用的IDE推薦 1.visual Studio 這款視覺化的微軟神器當然是支援net core的啦! 2. visual studio code 這款跨平臺開發工具, 可以說是神器了.支援mac,linus,w

GraphQL教程(二) .net Core api 2.1

一、編輯Schema資料夾內容 真正的GraphQL教程才剛剛開始QWQ，怕了吧，Schema的資料夾才是關於Graph的 置於GraphQL是什麼,一種用於 API 的查詢語言 GraphQL 既是一種用於 API 的查詢語言也是一個滿足你資料查詢的執行時。 GraphQL 對

asp.net core 系列 2 啟動Startup類介紹

一.Startup類 　　ASP.NET Core 應用是一個控制檯應用，它在其 Program.Main 方法中建立 Web 伺服器。其中Main方法是應用的託管入口點，Main 方法呼叫 WebHost.CreateDefaultBuilder來建立 Web 主機，自動分配了 Kes

【視訊】ASP.NET Core MVC 2.* 入門

內容如下： 1. ASP.NET Core 簡介和開發工具 2. ASP.NET Core 啟動相關的基礎知識 3. 使用Nuget & NPM 安裝，優化第三方庫 4. 配置MVC和其它中介軟體 5. 環境和Tag Helpers 1 6. Tag Helpers 2 7. 配置引

使用 .NET CORE 建立 專案模板，模板專案，Template

場景：日常工作中，你可能會碰到需要新建一個全新的解決方案的情況（如公司新起了一個新專案，需要有全新配套的後臺程式），如果公司內部基礎框架較多、解決方案需要DDD模式等，那麼從新起專案到各種依賴引用到能實際可用，一大堆的配置都需要重新設定、測試，耗時耗力，根據專案的大小，往往可能需要 1-2 小時甚至更久。

從ASP.Net Core Web Api模板中移除MVC Razor依賴項

前言 ：本篇文章，我將會介紹如何在不包括MVC / Razor功能和包的情況下，新增最少的依賴項到ASP.NET Core Web API專案中。     一、MVC   VS WebApi （1）在ASP.NET的早期版本中，MVC和Web API技術棧是完全

深入 .NET Core 基礎 - 2：共享框架

  深入 .NET Core 基礎 - 2：共享框架 原文地址：https://natemcmaster.com/blog/2018/08/29/netcore-primitives-2/ 共享框架從 .NET Core 1.0 就成為基礎部分。ASP.NET Core 從 .NET Core

總結：利用asp.net core日誌進行生產環境下的錯誤排查（asp.net core version 2.2，用IIS做伺服器）

概述 除錯asp.net core程式時，在輸出視窗中，在輸出來源選擇“除錯”或“xxx-ASP.NET Core Web伺服器”時，可以看到類似“info:Microsoft.AspNetCore.Hosting.Internal.WebHost[2] Request finished in 28

.NET Core +Angular 專案 部署到CentOS

前言： 　最近公司需要開發專案能在Linux系統上執行，示例開發專案採用.Net Core + Angular開發；理論上完全支援跨平臺。 　但是實踐才是檢驗真理的唯一標準；那麼還是動手來驗證實現下；過程中萬一出現什麼問題也算是積累經驗。 一、環境準備 　由於本次主要驗證專案部署Linux環境，也不想去重新搭

ASP.NET Core 2.0和Angular 4：從頭開始構建用於車輛管理的Web應用程式

  目錄 介紹 背景 使用程式碼 I）伺服器端 a）先決條件 b）設定專案 c）設定資料庫 d）使用AutoMapper e）使用Swagger f）執行API II）客戶端 a）先決條件 b）設定專案 c）實現服務 d）

visual studio code調試.net core 2.0程序

vs code 調試控制臺 debuger console datatable 最近在試.net 2.0 Preview時，在VS2017中相對麻煩，現說也怕把生產環境搞壞，於是就想在vs code下試試。首在安裝.net core 2.0的SDK和Runtime,這裏下載https://gi

用VSCode開發一個asp.net core 2.0+angular 5項目(4): Angular5全局錯誤處理

create 打印 事件 如果 log 異步操作 truct gin 按鈕 第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html

使用.NET Core 2開發部署Angular 5專案

目錄 介紹 背景 先決條件 開發設定 Angular 5設定 調整 部署的最後步驟 在Visual Studio 2017中使用.NET Core 2設定Angular 5以進行開發和部署的步驟。 介紹 在使用Visual Studio 2017建立和

ABP框架（asp.net core 2.X+Vue）模板專案學習之路（一）

      前言： 　　第一次接觸ABP的專案是在2018年6月份，但是當時沒有深入具體的研究，而今天因為工作的需要，需要學習、瞭解這個框架，在時隔半年之後，今天重新下載了這個專案，雖然在園子裡有很多前輩們寫的這類的文章，但是我還是會在部落格園中記錄一下學習的過程，一是希