การพัฒนา Angular 6.0 ร่วมกับ ASP.NET Core 2.1

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

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

  1. สร้างโปรเจ็ค ASP.NET Core Web Application

  1. เลือกเป็น API Templete และ ASP.NET Core 2.1 นะ

  1. คลิ๊กขวาที่โปรเจ็คแล้วเลือก Open Folder in File Explorer

  1. พิมพ์ cmd แล้ว Enter

  1. พิมพ์คำสั่ง
ng new ClientApp

  1. คลิ๊กขวาที่โปรเจ็คแล้วเลือก Manage NuGet Packages…

2018-06-06_00-56-29

  1. เลือกที่ Browse แล้วค้นหาคำว่า SpaServices แล้วเลือก Microsoft.AspNetCore.SpaServices แล้วกดปุ่ม Install

  1. แก้ไขไฟล์ Startup.cs

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

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

2018-06-06_01-08-29

ลบคำสั่งบรรทัดนี้ออกไป

"launchUrl": "api/values",

  1. กลับมาที่ console แล้วพิมพ์คำสั่งนี้เพื่อ Start Web Server
dotnet watch run

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

ที่มา: http://www.talkingdotnet.com/implement-asp-net-core-spa-template-feature-in-angular6-app

ติดตามบทความเกี่ยวกับ 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

1 Like