การพัฒนา Angular 6.0 ร่วมกับ ASP.NET Core 2.1 [VS Code + CLI]

โดยปกติแล้ว .NET Core CLI จะมีโปรเจ็ค Angular Template ให้อยู่แล้ว แต่มันเป็น Angular 5 แต่ถ้าเราต้องการเปลี่ยนมาใช้ Angular 6 นั้น อาจจะต้องทำเองบ้างนิดหน่อย แต่ก็ไม่ได้ยากจนเกินไป ลองทำตามกันดูนะ

บทความนี้จะเหมือนกับบทความก่อนหน้า การพัฒนา Angular 6.0 ร่วมกับ ASP.NET Core 2.1 แต่เปลี่ยนมาใช้ VS Code + .NET Core CLI + Angular CLI แทน

สิ่งที่จำเป็นก่อนเริ่มทำ

  1. เปิด Terminal หรือ Command Prompt แล้วสร้างโปรเจ็ค ASP.NET Core Web API ด้วยคำสั่ง
dotnet new webapi -o CBAngular

  1. เข้าไปใน Project Directory แล้วพิมพ์คำสั่งสร้างโปรเจ็ค Angular ดังนี้
ng new ClientApp

  1. ติดตั้งแพคเก็จ SpaServices ด้วยคำสั่ง
dotnet add package Microsoft.AspNetCore.SpaServices

  1. เปิดโปรแกรม VS Code ด้วยคำสั่ง
code .
  1. แก้ไขไฟล์ Startup.cs

ที่ Using Namespace เพิ่มโค้ดดังนี้

using Microsoft.AspNetCore.SpaServices.AngularCli;

ที่ ConfigureServices เมททอด เพิ่มโค้ดดังนี้

services.AddSpaStaticFiles(c =>
{
    c.RootPath = "ClientApp/dist";
});

ที่ Configure เมททอด เพิ่มโค้ดดังนี้

app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc(routes =>
{
    routes.MapRoute(name: "default", template: "{controller}/{action=index}/{id}");
});

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});
  1. แก้ไขไฟล์ launchSettings.json ลบคำสั่งบรรทัดนี้ออกไป
"launchUrl": "api/values",

  1. Start Web Server ด้วยคำสั่ง
dotnet watch run

  1. เปิด Browser แล้วเข้าไปที่ https://localhost:5001

ติดตามบทความเกี่ยวกับ Angular ต่อไปได้ที่ CodeBangkok นะครับ


บริจาค (Donate) ด้วย Crypto Currency ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa

https://www.lazada.co.th/products/angular-i223898871-s342278978.html?spm=a2o6z.10453683.17.3.77ba3002QFHWOq&mp=3