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

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

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

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

• 快速構(gòu)建：對于開發(fā)來說，你不需要再等待再每次更改之后，webpack去重新解析第三方代碼，因?yàn)榈谌筋悗鞂?dú)立到另外的一個(gè)bundle中，另外，超快速的構(gòu)建包含了所有的map文件便于調(diào)試，再發(fā)布版本的文件中卻將直接輸出壓縮版本，再發(fā)布過程中，這些工作將自動完成。

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

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

?

安裝

?

首先，確保你已經(jīng)安裝了一下必須內(nèi)容，沒有他們事情就無法進(jìn)行下去了：

• Visual Studio 2015 Update3：注意Update2是不夠的，你需要Update3，因?yàn)樗迯?fù)了一些關(guān)于npm的bug，而且它是使用Typescript的先決條件。

• .NET Core 1.0.1

• TypeScript 2.0 for Visual Studio 2015： 如果你的VS2015一直"抱怨" Cannot find name 'require',這就是因?yàn)槟阃浟税惭b本插件。

• Node.js 4及以上： 因?yàn)橐恍﹊ssue ,我們暫時(shí)不支持Node 0.x，使用node -v檢查你的Node版本。

當(dāng)你確認(rèn)過以上內(nèi)容安裝之后，下載并安裝 ASP.NET Core Template Pack Extension

?

創(chuàng)建并且運(yùn)行項(xiàng)目

?

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

?

鍵入一個(gè)名字，點(diǎn)擊OK，現(xiàn)在耐心等待一段時(shí)間，讓Node.js安裝所有依賴項(xiàng)目，考慮你的網(wǎng)絡(luò)環(huán)境，這可能需要一段時(shí)間（而且，考慮國內(nèi)環(huán)境）

?

一切就緒之后，項(xiàng)目中看起來可能回出現(xiàn)一點(diǎn)問題，但是實(shí)際上并不是這樣，當(dāng)VS2015完成安裝依賴后將會顯示not installed

?

然后，VS犯了個(gè)錯(cuò)，事實(shí)上是因?yàn)橐粋€(gè)只在macos上的可選依賴沒有安裝成功，你可以選擇視而不見，但是如果你是個(gè)強(qiáng)迫癥患者，那么看這里，追隨大神的腳步，去解決掉它。

現(xiàn)在，你可以運(yùn)行這個(gè)項(xiàng)目了，按下Ctrl+F5試試吧，以下內(nèi)容將會顯示在你的瀏覽器里：

?

服務(wù)端預(yù)渲染

?

在瀏覽一遍這個(gè)站點(diǎn)之后，你會發(fā)現(xiàn)一些簡單的angluar2 component的例子，這看起來倒不是什么牛逼了的事，但是歧視已經(jīng)在你看不見的地方發(fā)生了一些牛逼拉瞎的事情。

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

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

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

?

服務(wù)器端預(yù)加載的意義何在？

?

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

它真正的意義在于：

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

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

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

?

Webpack集成

?

當(dāng)前系統(tǒng)里的代碼使用typescript編寫，這就是說你需要在運(yùn)行它之前先構(gòu)建它，就像你使用SASS一樣，需要在使用之前編碼，甚至捆綁和壓縮它。

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

?

Webpack 開發(fā)中間件

?

通常來說，一旦你改變?nèi)魏我粋€(gè)Typescript文件，你都需要去運(yùn)行webpack來重新生成javascript文件，但是webpack開發(fā)中間件會幫助你做這些工作。

如果你的項(xiàng)目運(yùn)行在VS默認(rèn)開發(fā)模式下，webpack會在后臺監(jiān)控你每一個(gè)到http://yoursite/dist的請求，它處理每一個(gè)請求并且返回一個(gè)編譯過的代碼文件。

?

模塊熱拔插（HMR）

?

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

模塊熱拔插（HMR）解決了這個(gè)問題，在默認(rèn)的開發(fā)模式下，它會監(jiān)測對于angular項(xiàng)目文件的任何改變（Typescript,css,html），當(dāng)改變發(fā)生，它會自動觸發(fā)一次快速的編譯，并且托送所有改變的文件到活動的瀏覽器窗口，你的應(yīng)用程序?qū)诓凰⑿马撁娴那闆r下啊立即應(yīng)用改變。

你可以通過打開控制才來觀測它的工作，當(dāng)VS開始調(diào)試，瀏覽器控制臺將會顯示以下內(nèi)容：

看到[HMR] Connected的字眼了嗎？它代表已經(jīng)準(zhǔn)備好接收新的文件了，嘗試更改一個(gè)源文件。比如：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做出的杰出貢獻(xiàn)。?

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

---

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。