如何將 Angular 9 SPA 項目和 ASP.NET Core 2.2 MVC 項目組合成一個 Visual Studio 2017 解決方案？

Question

我提供這個問題/答案是因為我在嘗試學習 SPA 客戶端和 MVC 服務器應用程序時遇到了挫折。 These instructions are paraphrased from chapter 3 of “Essential Angular for ASP.NET Core MVC 3 – Second Edition” by Adam Freeman (Apress) to describe how to create a single Visual Studio 2017 (or VS2019) solution which contains an Angular 9 website project called “ ClientApp”作為前端 SPA，一個名為“ServerApp”的 ASP.NET Core 2.2 MVC 項目作為后端 API 服務器項目用於數據庫訪問。

假設您已經安裝了 Visual Studio 2017（或 2019）、Node.js、Angular/CLI（版本 9+）和 .NET Core 2.2+ 版本，並且您知道如何使用“cmd.exe”命令提示符。

步驟 1：使用命令提示符，在 a..\source\repos 目錄中創建解決方案文件夾和 Angular 項目：

>  CD \Users\(username)\source\repos  (or some convenient folder)

>  ng new MyWebSolution –directory MyWebSolution/ClientApp –routing true –style css –skip-tests true –skip-git true
    (Note:    make sure to type this as one long command which may wrap on your screen)

第 2 步：使用命令提示符啟動 Angular 開發工具：

> cd MyWebSolution/clientapp

> npm start

第 3 步：當您看到“編譯成功”時

- browse to http://localhost:4200 to see Angular placeholder content

第 4 步：打開 Visual Studio，select 文件 > 打開 > 文件夾和 select MyWebSolution 文件夾。 您應該會看到新的“ClientApp”項目的內容。

步驟 5：將 ClientApp/src/app 文件夾中的 app.component.html 文件的內容替換為以下內容：

<h2>MyWebSolution</h2>
<span>Angular Content Will Go Here</span>

第 6 步：瀏覽至 http://localhost:4200 以查看 Angular 占位符內容已更改

第七步：按Ctrl-C停止Angular開發工具window

第 8 步：准備 MyWebSolution 文件夾中解決方案的 ASP.NET Core MVC 部分：

> mkdir ServerApp
> cd ServerApp
> dotnet new globaljson --sdk-version 2.2.110    

步驟 9：創建 ASP.NET 核心項目

> dotnet new mvc --language C# --auth None

(wait for completion)

第 10 步：在 Visual Studio 中，select File > Open > Project/Solution 並導航到 MyWebSolution/ServerApp 文件夾和 select MyWebSolution.csproj 文件以在 Z303CB0EF58EDB9082AZD61 模式下打開項目。 然后，右鍵單擊解決方案資源管理器頂部的解決方案項和 select 添加 > 現有網站。 - 導航到 MyWebSolution/ClientApp 並單擊打開按鈕。 您應該在解決方案中看到您的 Angular 網站 (ClientApp) 和您的 MVC 項目 (SeverApp)。

步驟 11：在 VS2017 中，右鍵單擊 ClientApp 項，select Property Pages，導航到 Build 部分。 確保未選中“構建 Web 站點作為解決方案的一部分”。 您應該再次打開和關閉它以確保它已關閉，然后單擊“應用”和“確定”進行保存。

第 12 步：從菜單 Select 文件 > 全部保存，將解決方案保存在 MyWebSolution 文件夾中為“MyWebSolution.sln”。 使用此文件打開開發會話的解決方案。

第 13 步：更改 ServerApp/Properties 文件夾中 LaunchSettings.json 文件中的 IIS 開發端口，以實現 HTTP/S 一致性：

-  edit LaunchSettings.json and change and save the "iisExpress": section to the following:
    
    "applicationUrl": "http://localhost:5000",
    "sslPort": "5001"

第 14 步：重新生成 Windows 開發證書：

> dotnet dev-certs https --clean
> dotnet dev-certs https --trust

第 15 步：構建並運行 ASP.NET Core MVC 項目：

> dotnet watch run

第16步：打開瀏覽器，go到https://localhost:5001，你應該看到MVC占位符內容

第 17 步：使用 ctrl-C 停止 MVC 運行時，然后通過右鍵單擊 ServerApp/Views/Home 項並選擇 Add > View，將 MVC Razor 占位符頁面添加到 ServerApp 文件夾。 將視圖名稱設置為“占位符”，select“空（無模型）”模板並單擊添加。 將以下內容添加到空白頁面並保存：

 @{
    ViewData["Title"] = "Placeholder";
 }

 <h2>MyWebSolution</h2>
 <span>ASP.NET Core MVC Content Will Go Here</span>

第 18 步：通過編輯和更改 ServerApp/Controllers/HomeController.cs 中 Index() 操作結果的內容來使用這個新視圖：

  return View("Placeholder");

(be sure to save your changes and restart the dotnet runtime)
> dotnet watch run

步驟 19：通過將 package 添加到 MyWebSolution/ServerApp 文件夾，連接 Angular 和 ASP.NET 核心 MVC 應用程序：

> dotnet add package Microsoft.AspNetCore.SpaServices.Extensions --version 2.2  

第 20 步：通過 ASP.NET 核心管理 Angular 服務器，方法是將以下內容附加到 Startup.cs 文件的 Public Void Configure() 方法：

    app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "../ClientApp";
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        });

第 21 步：Select 文件 > 全部保存並使用命令 window 啟動 NPM 客戶端和 dotnet 開發服務器：

- in MyWebSolution/ClientApp:   npm start

- in MyWebSolution/ServerApp:   dotnet watch run

第 22 步：瀏覽到 https://localhost:5001 - 您應該看到 ASP.NET 核心 MVC 占位符

第 23 步：打開另一個瀏覽器 window 並瀏覽到 https://localhost:5001/app - 你應該看到 Angular 占位符

 Note: You can clean, rebuild and build the complete solution from the Visual Studio menu or from the solution item in the Solution Explorer,
     but you should not run or start the Solution by using F5 or Shift-F5.  You may also use for VS2019 and .NET Core 3.0 applications.

Answer 1

無需回答，但歡迎評論。 對我來說，上面提到的書是學習如何將完整的應用程序創建為一個 Visual Studio 解決方案的最簡單方法。 如果您更喜歡使用 Visual Studio Code，可以將其用作代碼編輯器。 這也應該適用於 VS2019 和 .NET Core 3.0，因為上述亞當弗里曼的書使用這些版本。 讓他的書向經驗豐富的開發人員和名師學習。