[SOLVED] Angular with parameterized routes gives blank page on refresh (IIS)


This Content is from Stack Overflow. Question asked by Mikhail Kurakhtanov

I have implemented a solution to solve 404 error on page refreshing in my angular application. For this, I put this code to web.config file in my website folder on IIS:

<rule name="AngularJS Routes" stopProcessing="true">
    <match url=".*" />
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />   
    <action type="Rewrite" url="/" />

This code is successfuly works with a static routes like ‘/blog’, but it doesn’t work with routes like ‘/blog:categoryId’. Hope you can help me; I was struggling with it for the couple of months…

An example of errors on page refreshing with parameterized route below:
enter image description here


I recommend to create the page 404 found in the project itself and add it in the app-routing.module.ts.

Example code snippet below:

const routes: Routes = [{
    path: 'home',
    component: HomeComponent,
    path: '404',
    component: PagenotfoundComponent
    path: '**',
    redirectTo: '404'

In the code above, it will redirect someone who is trying to access any page except the provided routes to the Pagenotfound Component. The ** in Path: '**' means wildcard route in Angular. This indicates that any route that doesn’t match an existing route in your configuration will use this route.

This Question was asked in StackOverflow by Mikhail Kurakhtanov and Answered by dom.macs It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?