Angular 2 + IIS on refresh 404 error

Question

I recently stated a angular 2 project in vs2015 and IIS 7.5. I have a problem with refreshing pages, when I refresh a page i get

"HTTP Error 404.0 - Not Found".

And here is my angular code: In index.html I have

<script>document.write('<base href="' + document.location + '" />');</script>

In app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';

import { HomeModule } from './modules/home.module';
import { CodesModule } from './modules/codes.module';
import { AdminModule } from './modules/admin.module';

@NgModule({
    imports:
    [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([
            { path: 'home', component: HomeComponent },
            { path: 'home/:unauthorized', component: HomeComponent },
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: '**', redirectTo: 'home', pathMatch: 'full' },
        ]),
        HomeModule,
        CodesModule,
        AdminModule
    ],
    declarations:
    [
        AppComponent,
        HomeComponent
    ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

And the other moduls:

import { NgModule } from '@angular/core';

import { RouterModule } from '@angular/router';

import { CodesComponent } from '../components/codes/codes.component';

@NgModule({
    declarations:
    [
        CodesComponent
    ],
    imports:
    [
        RouterModule.forChild([
            { path: 'codes', component: CodesComponent },
        ])
    ]
})
export class CodesModule {

}

import { NgModule } from '@angular/core';

import { RouterModule } from '@angular/router';

import { AdminCompoment } from '../components/admin/admin.component';

@NgModule({
    declarations:
    [
        AdminCompoment
    ],
    imports:
    [
        RouterModule.forChild([
            { path: 'admin', component: AdminCompoment },
        ])
    ]
})
export class AdminModule {

}

When I try with hash tag works correctly, but I don't want to use has tag. I tried rewrite rules in IIS but then when I refresh some page I have only redirect is to main page.

Please for help. Thanks.

user3118955 user3118955 · Accepted Answer · 2017-03-01T13:21:41

Solved. Steps:

Add rewrite in web.config with action like this <action type="Rewrite" url="/eUsluge.Administration.UI/" appendQueryString="true" />
Index.html add this

<base href="/Application/" />

Angular 2 + IIS on refresh 404 error

1 Answers