目錄

介紹

背景

先決條件

開發設定

Angular 5設定

調整

部署的最後步驟

在Visual Studio 2017中使用.NET Core 2設定Angular 5以進行開發和部署的步驟。

介紹

在使用Visual Studio 2017建立和部署.NET Core 2和Angular 5應用程式時，我遇到了一些困難。因此，我想把我所有的步驟放在一個地方，這樣可以幫助其他人設定和部署使用.NET Core 2和Angular 5編寫的應用程式。

背景

本文的目的是提供建立全新應用程式（使用Visual Studio 2017，.NET Core 2

先決條件

1. 安裝了.NET Core和Node Development的Visual Studio 2017（您可以使用您選擇的IDE for .NET）
2. NodeJS - 從https://nodejs.org/en/download/current/安裝 
3. IIS的節點 - 從https://github.com/tjanczuk/iisnode/releases安裝它 

我不會給出安裝部分，因為它只是下載和標準點選，下一步，下一步。

開發設定

開啟Visual Studio 2017（最好是

在以下螢幕中選擇Angular模板，然後單擊Ok按鈕。

這將建立使用.NET Core開發Angular應用程式所需的外觀。

這是我們利用Angular平臺的基礎/外觀。

Angular 5設定

開啟Node.js命令提示符（以管理員身份執行訪問許可權）。

並瀏覽到我們剛剛建立的專案的位置（從上面的螢幕截圖 - C：\ Users \ amitk \ Documents \ Visual Studio 2017 \ Projects \ WebApplication1 \ WebApplication1

使用dir命令，您可以在列表中看到package.json。

現在我們準備執行幾個命令來設定Angular 5：

1. 確保安裝了最新的npm。因此，執行命令npm install -g npm
2. 然後使用命令更新Angular包：
   1. npm install -g npm-check-updates
   2. 然後是ncu -u

您會注意到您的package.json檔案現在已使用Angular 5庫進行更新。

調整

• 現在我們需要修改webpack.config.js，為什麼？因為Angular 4及以下版本支援AOT編譯器，但Angular 5及以上版本在部署時不支援AOT編譯。參考 - https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack

在Visual Studio中開啟webpack.config.js並將所有出現的AotPlugin替換為AngularCompilerPlugin

儲存並關閉webpack.config.js。

• 在Visual Studio中開啟檔案ClientApp / boot.server.ts

你會在25行看到錯誤（zone.onError.subscribe((errorInfo: any) => reject(errorInfo));）

在第22行更改宣告

將這裡 - const zone = moduleRef.injector.get(NgZone);

改為 -  const zone: NgZone = moduleRef.injector.get(NgZone);

錯誤現在將消失。儲存並關閉此檔案。

• 在Visual Studio中開啟檔案ClientApp / app / app.browser.module.ts

並在最後一個import語句後新增以下內容：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations;

另外，在imports 部分新增 - BrowserAnimationsModule

修改後的檔案的螢幕截圖：

• 在Visual Studio中開啟檔案Views / Home / Index.cshtml並更改該行

來自<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

變為< app >正在載入... </ app >

我們現在完成了開發設定。在Visual Studio中按F5以檢視您的應用程式是否正在執行

部署的最後步驟

1. 開啟IIS（如果可能，以管理員身份執行）。右鍵單擊“站點”並選擇“新增網站”。輸入站點名稱，部署的資料夾路徑和埠以完成新增網站設定並點選確定按鈕。
   
2. 現在我們需要配置應用程式池。單擊IIS中的“應用程式池”，然後雙擊TestAngular5應用程式池進行編輯。將.NET CLR版本更改為“ 無管理程式碼”，然後單擊“確定”按鈕。
   
3. 回到Visual Studio並將網站釋出到IIS中的設定資料夾中（在步驟1中）。

點擊發布以部署應用程式。然後開啟您喜歡的瀏覽器並瀏覽到http:// localhost:160

如果一切順利，您應該看到您的全新Angular 5 .NET Core網站啟動並執行：

原文地址：https://www.codeproject.com/Articles/1221503/Angular-and-NET-Core-with-Visual-Studio