Cấu hình IIS để khắc phục lỗi 404 cho Website code bằng Angular

 Đối với các Website code bằng Angular khi deployed lên máy chủ thường gặp tình huống:

Khi Bạn bấm vào một liên kết (url) bất kỳ trong Website thì Angular sẽ định tuyến (router) và đưa Bạn đến url đó. Trường hợp này không xảy ra vấn đề gì

Tuy nhiên nếu Bạn gõ url đó trực tiếp lên trình duyệt, hoặc bấm vào url từ một liên kết bên ngoài Website (Email, Website khác, ...), hoặc refresh lại trang (F5) thì xảy ra lỗi 404 - Not found

(Màn hình lỗi 404 - Not found)

Nguyên nhân là do các thao tác này được yêu cầu (request) trực tiếp trình duyệt của client lên máy chủ không thông qua định tuyến của Angular.

Để khắc phục lỗi này trên IIS ta cần cấu hình như sau:

Bước 1: Cài đặt URL Rewrite  nếu chưa có (https://www.iis.net/downloads/microsoft/url-rewrite)

Bước 2: Thêm thẻ <rewrite> vào file Web.config với nội dung như sau:

<?xml version="1.0" encoding="utf-8"?>

<configuration>

<system.webServer> 

  <rewrite> 

    <rules> 

      <rule name="Angular Routes" stopProcessing="true"> 

        <match url=".*" /> 

        <conditions logicalGrouping="MatchAll"> 

          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 

          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 

        </conditions> 

        <action type="Rewrite" url="/index.html" /> 

      </rule> 

    </rules> 

  </rewrite> 

</system.webServer>

Trong đó index.html là file chạy đầu tiên của Website

Nếu chưa có file Web.config thì bạn copy nội dụng trên lưu thành file Web.config và đặt vào thư mục gốc của Website trên IIS

Đối với các WebServer khác Bạn tham thêm tại https://angular.io/guide/deployment#routed-apps-must-fall-back-to-indexhtml