in General, Tips & Tricks

SPA trong Asp.Net core MVC

Mới được sếp giao cho quả nhúng thằng Angular vào trong app Asp.Net Core. Khá là hoang mang, sau hơn 1 ngày lần mò trong vô vọng thì cuối cùng cũng tìm được phương án.

Yêu cầu: Có 1 web Asp.Net Core MVC làm chủ đạo, và cũng có một web dựng trên Angular X (X = Version bất kỳ – Có thể là AngularJS luông). Sếp muốn bê con Angular này vào 1 sub-module của Asp.Net Core thay vì tách riêng.

Giải nghĩa: Tức là khi duyệt vào 1 sub-module/Controller thì sẽ mở file index.html đã được build ra từ Angular. Tuy nhiên có một vấn đề gặp phải đó là Angular sẽ tự động update Path URL trên trình duyệt, mặc dù nó không phải là vấn đề to lớn cho lắm !!!

Cách làm thì đơn giản thôi

  • Tạo 1 thư mục con bên trong wwwroot, tên là angular-cms
  • Tiếp đến, tạo đường dẫn cụ thể cho phần angular-cms bằng cách thêm phần code sau vào Startup.cs
app.UseStaticFiles(new StaticFileOptions
{
  FileProvider = new PhysicalFileProvider(       Path.Combine(_env.WebRootPath, "angular-cms")), // Đường dẫn tới thư mục angular-cms, _env là IHostingEnvironment
  RequestPath = "/AngularCMS" // Đường dẫn trên trình duyệt để trỏ tới thư mục angular-cs
});
  • Có một phần trong file index.html bạn phải sửa đó là <base href=”/”> thành <base href=”/AngularCMS/”> để khi load file js,css,assets không bị lỗi. Hoặc bạn có thể build với custom –base-href=/AngularCMS/

Vậy là xong! Rất đơn giản phải không nèo 😀