多個月以來，我和多個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做出的傑出貢獻。
轉載請注明出處
白玉龍 2017/1/9
我的博客即將搬運同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan