如何正確設置一個新的Angular 6項目

Question

在我學習Angular的過程中，我遇到了兩種創建新Angular項目的方法。

第一種是使用Angular CLI命令：

ng new app-name-here

第二個是使用命令：

dotnet new angular app-name-here

生成的項目看起來非常不同，我需要介紹很多部分。 這兩種方法有什么區別？ 當目標是構建與給定ASP.Net Core API通信的客戶端應用程序時，每種方法的優缺點是什么？

Answer 1

dotnet new angular使用的模板來自微軟 。

這是一個凍結的時間模板，其明顯的缺點是它總是過時，因為Angular一直在變化。

通常，您只需說ng update和/或按照Angular更新指南獲取最新更新即可。 然而，在主要版本發布之后，這是一個更大的問題 - 現在模板使用Angular 5，而Angular 6是最新的。

該模板有一些優點和缺點：

好處

• 你知道它可以開箱即用，對於一個“游樂場”項目來說這是一個很好的開始。
• 它包括bootstrap和比angular ng new更有用的樣本。
• 它還包括WebAPI示例代碼（與Angular代碼不同），因此您可以快速添加新的API控制器。

缺點

• 有時Angular會在更新之間進行MAJOR更改。 版本5-6就是這樣一個例子，其中.angular-cli.json現在是angular.json ，格式完全不同。 如果你是剛接觸角度，這只會增加整體頭痛。
• ng update似乎永遠不會對我有效。 查看Angular升級指南。
• 您可能不希望包含bootstrap css。
• 如果你已經有了一個Angular項目，你想要dotnet-ify它不會輕易地為你做到這一點。

由於5> 6的主要變化，我建議不要立即使用此模板，除非進行臨時測試。 。

對我來說，我發現最好的辦法是遵循以下步驟：

• 運行dotnet new angular或dotnet new angular -o projectname將其放在子目錄中。 這將獲得您的Spa模板設置，以將dotnet世界連接到角度世界。
• 完全擦除它為您創建的ClientApp文件夾的內容 - 或重命名它，以便您可以參考示例代碼，如果您是Angular的新手
• CD到ClientApp文件夾
• 使用Angular CLI （從angular團隊單獨安裝）並運行ng new --help以查看所有可用選項
• 創建你的角度應用。 這些是我使用的選項：

ng new sjw_website --routing --style=scss -prefix=sjw

前綴是您的自定義組件元素的開頭（例如，'name'是創建的文件夾（將在ClientApp中）

• 使用npm start運行你的Angular應用npm start ，它在端口4200上npm start它（從ClientApp/sjw_website的新文件夾運行它）。 您可以立即在http：// localhost：4200上查看此內容，該內容與dotnet完全分開並在Angular自己的服務器中運行。
• 修改startup.cs的SPA模板以使用這行代碼spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); 這將代理對角度服務器的請求。
• 修改startup.cs以指向ClientApp/sjw_website （或手動將文件移動到某個級別）
• 打開第二個powershell來構建和運行（在包含你的dotnet項目的文件夾中）
• 構建dotnet build並運行dotnet run
• 或者使用dotnet watch run

請注意，在更改角度文件時，角度ng serve開發服務器下運行的角度項目將自動重新啟動。 使用dotnet watch時，當您對dotnet文件進行更改時，dotnet服務器將重新啟動。

打開兩個將是您的最佳體驗，最好是在第二台顯示器上。

請注意，當您執行生產構建時，嵌入在csproj文件中的npm build命令會執行魔術並將輸出指向dist文件夾。

Answer 2

新的

使用CLI創建新的角度項目。 它不會創建您需要的任何后端代碼/項目

dotnet新角度

基於MS提供的模板創建新的.NET核心項目。 它還會創建（大多數？）Angular部分所需的文件。 既然你想要一個ASP.NET核心后端，我會想要一個單命令解決方案。 我自己沒有用過，所以你的里程我的變化。

手冊

您始終可以在Visual Studio中創建ASP.NET Core WebAPI項目，然后在其中ng new一個應用程序。 這是我通常采取的路線。

Answer 3

編輯（201年5月31日）

今天我創建了一個DotNet項目模板，可以為任何人提供這些步驟。 你可以在這里試試：

AspNetCore2Ang6Template： https ： //github.com/JuanGarciaCarmona/AspNetCore2Ang6Template

結束編輯（201 / MAY / 2018）

對第二個問題：

當目標是構建與給定ASP.Net Core API通信的客戶端應用程序時，每種方法的優缺點是什么？

恕我直言最好的選擇是同時擁有兩個項目，因為您可以從單個項目部署和服務客戶​​端（角度）和API（ASP NET核心Web API控制器），這在開發階段是很好的並且便於部署。 為了實現這么好的選擇是混合兩種機制，你可以創建dotnet項目，在其里面角度代碼也包含它的地方，添加和使用MVC到你的應用程序並提供角度應用程序。

最簡單的配方是：

1. 創建一個dotnet項目（空ASP NET核心Web應用程序）並將其命名為XXXXXX，可以從Visual Studio或表單命令行（'dotnet new web'）完成
2. 然后，從命令行轉到prevous文件夾並鍵入ng new XXXXXX，該命令會將您需要的所有內容放在先前創建的dotnet項目文件夾中。

3. 一旦完成，請轉到angular.cli並將輸出設置為'wwwroot'（而不是'dist / XXXXXX'4 .-您的啟動類應該是：

    public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseMvc(); app.UseDefaultFiles(); app.UseStaticFiles(); 

   }}

然后你可以使用dotnet run或ng serve來運行它，這兩個命令都可以運行。

有一件事，至少對我來說是缺失的，是實時重新加載不起作用，一旦我為我修復它我會更新這個答案。

我希望它有所幫助，

胡安

編輯（26 / MAY / 2018）

關於實時重新加載，我無法通過從VS調試或使用dotnet運行運行應用程序來實現這一目標，但是檢查樣式和小而棘手的自定義我所做的是使用'ng serve'啟動Web應用程序。

如果您需要同時啟動和運行客戶端和服務器，因為您需要從客戶端應用程序調用api控制器，那么您可以使用environment.ts配置您的api基本URL，並在此期間從VS和您的前端運行您的后端用ng服務結束。 希望這將在未來的VS版本中得到解決或修復，或者正如我所見，在為Angular 6准備的更新的asp net core SPA模板中