多個月以來，我和多個Github上的社區貢獻者一起建立支持庫、包，我們最終的目的是希望完成這樣一個作為起點的模板，也就是基于把Typescript代碼和Angular2宿主在ASP.NET Core項目中，這個模板包含一下這些方面：

• 服務端預加載（預渲染）：這樣你的UI可以快速的顯示，甚至在瀏覽器下載Javascript之前。

• Webpack中間件集成：在開發期間，你不需要一直重新編譯你的客戶端項目，或者你可以用一個watcher工具在后臺幫你做這些事。

• 模塊熱拔插：在開發期間，一旦你編輯了一個Typescript文件、CSS文件、或者其他客戶端資源，你的改變也將在不刷新頁面的情況下立即推送到瀏覽器。

• 快速構建：對于開發來說，你不需要再等待再每次更改之后，webpack去重新解析第三方代碼，因為第三方類庫將會獨立到另外的一個bundle中，另外，超快速的構建包含了所有的map文件便于調試，再發布版本的文件中卻將直接輸出壓縮版本，再發布過程中，這些工作將自動完成。

那如果你想使用一個不一樣的framework呢？如果你傾向于React、React+Redux或者Knockout，我們也同樣為他們提供了模板。

假如你是在Linux和MacOS開發，或者使用其他IDE，使用我們的Yeoman生成器來獲得在VS Code或者其他編輯器上對于Angular2、React、React+Redux或者knockout項目的相同支持，.NET Core是完全跨平臺的。

?

安裝

?

首先，確保你已經安裝了一下必須內容，沒有他們事情就無法進行下去了：

• Visual Studio 2015 Update3：注意Update2是不夠的，你需要Update3，因為它修復了一些關于npm的bug，而且它是使用Typescript的先決條件。

• .NET Core 1.0.1

• TypeScript 2.0 for Visual Studio 2015： 如果你的VS2015一直"抱怨" Cannot find name 'require',這就是因為你忘記了安裝本插件。

• Node.js 4及以上： 因為一些issue ,我們暫時不支持Node 0.x，使用node -v檢查你的Node版本。

當你確認過以上內容安裝之后，下載并安裝 ASP.NET Core Template Pack Extension

?

創建并且運行項目

?

當你完成安裝以上所有內容后，你可以打開VS2015 創建新項目，展開Web目錄，選擇 ASP.NET Core Angular2 Starter Application(.NET Core)

?

鍵入一個名字，點擊OK，現在耐心等待一段時間，讓Node.js安裝所有依賴項目，考慮你的網絡環境，這可能需要一段時間（而且，考慮國內環境）

?

一切就緒之后，項目中看起來可能回出現一點問題，但是實際上并不是這樣，當VS2015完成安裝依賴后將會顯示not installed

?

然后，VS犯了個錯，事實上是因為一個只在macos上的可選依賴沒有安裝成功，你可以選擇視而不見，但是如果你是個強迫癥患者，那么看這里，追隨大神的腳步，去解決掉它。

現在，你可以運行這個項目了，按下Ctrl+F5試試吧，以下內容將會顯示在你的瀏覽器里：

?

服務端預渲染

?

在瀏覽一遍這個站點之后，你會發現一些簡單的angluar2 component的例子，這看起來倒不是什么牛逼了的事，但是歧視已經在你看不見的地方發生了一些牛逼拉瞎的事情。

第一件事，雖然通常angular2運行在瀏覽器里，但是ASP.NET Core Server也可以讓他運行在服務器端，所以它可以僅將HTML代碼發送到瀏覽器，不需要javascript就可以顯示內容。

為了證明它，你可以通過禁用瀏覽器的Javascript功能，然后刷新頁面來查看內容，對于Chrome來說，你可以打開F12控制臺，點擊設置，在里面找到Disable Javascript復選框，并且反選它。

刷新頁面，你會發現一切看起來和之前一樣，左邊的tab還是可以工作，但是一些依賴javascript的內容就不再可以運行了，比如counter。

?

服務器端預加載的意義何在？

?

意義并不在于讓支持哪些不運行javascript的瀏覽器，它只是一種極端情況而已（如果為了這種極端情況，那還為什么要建立一個SPA應用呢？）

它真正的意義在于：

它極大的提高了用戶體驗：及時他們是在一個較慢的網絡環境或者設備上，也可以在很快的看到你想顯示給他們的內容，在這背后，你可能又一個很大的捆綁javascript正在下載、轉換并且執行，然后緊接著接管頁面實現綁定你的那些功能，這比花很長時間加載javascript代碼，讓客戶看到一個空白的網頁好的多。

它支持一些能不運行javascript的爬蟲：對于搜索引擎來說，返回簡單的HTML代碼對于他們來說是更簡單的理解和收錄的。

假如你不想使用預加載，可以通過移除在Views/Home/Index.cshtml中的app標簽的asp-prerender-module屬性來禁用它。

?

Webpack集成

?

當前系統里的代碼使用typescript編寫，這就是說你需要在運行它之前先構建它，就像你使用SASS一樣，需要在使用之前編碼，甚至捆綁和壓縮它。

目前最興盛的modern javascript構建系統是Webpack，它類似Grunt和Gulp，但是在2017的今天（原文中是2016），Webpack是最流行的typescript編譯、捆綁和壓縮工具，我們在template中使用它的幾個非常酷的功能：

?

Webpack 開發中間件

?

通常來說，一旦你改變任何一個Typescript文件，你都需要去運行webpack來重新生成javascript文件，但是webpack開發中間件會幫助你做這些工作。

如果你的項目運行在VS默認開發模式下，webpack會在后臺監控你每一個到http://yoursite/dist的請求，它處理每一個請求并且返回一個編譯過的代碼文件。

?

模塊熱拔插（HMR）

?

在有任何代碼修改之后，通常我們需要刷新頁面來應用這些修改，但是這對于效率和調試方便性來說是很不友好的。

模塊熱拔插（HMR）解決了這個問題，在默認的開發模式下，它會監測對于angular項目文件的任何改變（Typescript,css,html），當改變發生，它會自動觸發一次快速的編譯，并且托送所有改變的文件到活動的瀏覽器窗口，你的應用程序將會在不刷新頁面的情況下啊立即應用改變。

你可以通過打開控制才來觀測它的工作，當VS開始調試，瀏覽器控制臺將會顯示以下內容：

看到[HMR] Connected的字眼了嗎？它代表已經準備好接收新的文件了，嘗試更改一個源文件。比如：ClientApp/app/components/home/home.component.html。

原文地址：http://www.dotnet.online/Article/66/ASP-NETCoreAngular2TemplateforVisualStudio

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

本文翻譯征得了原作者Steve Sanderson的同意，感謝他為ASP.NET Core做出的杰出貢獻。?

原文地址：http://www.cnblogs.com/xiaoyaojian/p/6272292.html

---

.NET社區新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注

總結

以上是生活随笔為你收集整理的ASP.NET Core + Angular 2 Template for Visual Studio的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。