Lỗi reload trang khi triển khai Angular hoặc React trên IIS

Vấn đề

Vấn đề là IIS không nhận được routing của Angular nên nó không tìm thấy. Routing của Angular nó chạy phía client.

Môi trường

Khi triển khai ứng dụng Angular bằng CLI lên IIS các bạn tạo app như bình thường sau đó config pool là No Managed và Classic. Tuy nhiên khi F5 ở trình duyệt thì nó báo lỗi 404 không tìm thấy trang.

Giải pháp

Có 2 cách xử lý vấn đề này:

Cách 1 là enable chế độ Hash tức là URL luc này thêm # ở đuôi domain sau đó đến routing. Cách này ok nhưng URL không tự nhiên lắm. Chúng ta chỉ cần sử dụng useHash là true ở phần config NgModule là được.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Cách 2 thì config ở file web.config trong web App, chúng ta cần tạo file web.config trong thư mục root của app và nội dung như sau:

<?xml version="1.0"?>  
<configuration>  
    <system.webServer>  
        <rewrite>  
            <rules>  
                <rule name="React Routes" stopProcessing="true">  
                    <match url=".*" />  
                    <conditions logicalGrouping="MatchAll">  
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />  
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />  
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />  
                    </conditions>  
                    <action type="Rewrite" url="/" />  
                </rule>  
            </rules>  
        </rewrite>  
    </system.webServer>  
</configuration>     

Nhớ là cần cài URL Rewrite Module cho IIS nhé.

Tác giả: Bạch Ngọc Toàn

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.