前言：

本系列文章主要為對所學 Angular 框架的一次微小的實踐，對 b站頁面作簡單的模仿。

本系列文章主要參考資料：

微軟文檔：　　　　https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=windows

Angular 文檔：　　?https://angular.cn/tutorial

Typescript 文檔：　https://www.typescriptlang.org/docs/home.html

此系列皆使用 VSCode+C#+Typescript+Angular+EF Core 作為開發環境。如果有什么問題或者意見歡迎在留言區進行留言。?

如果圖片看不清的話請在新窗口打開圖片或保存本地查看。

項目 github 地址：https://github.com/NanaseRuri/FakeBilibili

?本章內容：頁面分析、創建 WebAPI + Angular7 項目

?一、頁面分析

首先分析我大概要做些什么效果：

??二、創建 WebApi + Angular 7 項目

?首先運行命令創建一個新項目：

dotnet new angular -o FakeBilibili

由于 ASP.NET Core 的默認 Angular 項目使用的是 Angular6 框架，在此將命令行工作目錄轉移到當前目錄，將當前 Angular 項目刪除并使用 Angular CLI 創建新的 Angular 項目：

可選擇使用?--skipGit 跳過 Git 安裝。

ng new ClientApp --skipGit

Angular 7中，當運行 ng new 命令時，若沒有指定樣式表類型或是否使用默認路由，會額外在命令行出現選擇項。在此為更方便地編寫樣式表選擇使用 scss。

?

在 Angular.json? 文件中更改 styles 屬性使用 scss，這里影響的只是 Angular CLI 創建組件時的選項：

由于在一個 Angular+WebAPI 項目中同時存在后臺服務器以及 Angular 服務器，修改 Configure方法使其外部使用 Angular CLI 實例，而不是啟動它自己的實例。

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");?

此處指定端口號為 4200 是因為 Angular 應用默認端口號為 4200，可以在 package.json 文件中對端口號進行修改：

?

三、啟動服務器

在 ClientApp 工作目錄中運行 npm start 命令（PS：使用 npm start 是約定，本質上運行的是 ng serve），然后在 ASP.NET Core 項目文件夾中運行 dotnet run 命令：

當第一次運行 dotnet run 命令時會提醒創建 .vscode 文件夾，其中的 launch.json 可以配置啟動環境，默認為 development 環境。

當使用?spa.UseProxyToSpaDevelopmentServer 方法后，如果在 Angular 項目未編譯完成啟動 https://localhost:5001/5000 會發生錯誤。

ClientApp 工作目錄中：

ASP.NET Core 項目工作目錄中：

第一次運行 npm start 命令可能會等待很長時間，Angular 項目編譯完成后如下：

?

?等待 Angular 項目編譯完成后打開 localhost:5000或5001，出現的是默認的 Angular 項目的模板：

如果沒有覆蓋原 Angular 項目的話，出現的是微軟項目的模板：

原文地址：https://www.cnblogs.com/gokoururi/p/10666735.html

.NET社區新聞，深度好文，歡迎訪問公眾號文章匯總?http://www.csharpkit.com?

總結

以上是生活随笔為你收集整理的仿B站（一） 目的分析以及创建 WebAPI + Angular7 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

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