When I start my app (localhost/), everything works fine and it redirects to the default route (localhost/welcome). However, when I reload the page, IIS is looking for a directory welcome, which doesn't exist, because it's just a virtual route.
I read that there are two solutions. 1. IIS Url Rewrite, 2. Using the HashLocationStrategy (no idea why and how this solves the problem).
Unfortunately, I cannot get solution 2 to work:
@NgModule({
imports: [ MapModule, BrowserModule, HttpModule, FormsModule, routing, DataTableModule, MdGridListModule, GrowlModule, TabMenuModule, PanelModule],
declarations: [ Application, CellDetailComponent, WelcomeComponent, SlimLoadingBarComponent],
bootstrap: [ Application ],
providers: [
appRoutingProviders,
AppConfig,
{ provide: APP_INITIALIZER, useFactory: (config: AppConfig) => () => config.load(), deps: [AppConfig], multi: true },
{ provide: LocationStrategy, useClass: HashLocationStrategy}
]
})
The route setup:
import { Routes, RouterModule } from '@angular/router';
import {CellDetailComponent} from "./components/infopanel/cell-detail.component";
import {WelcomeComponent} from "./components/infopanel/welcome.component";
import { ModuleWithProviders } from '@angular/core';
const appRoutes: Routes = [
{ path: 'welcome', component: WelcomeComponent },
{ path: 'cell/:id', component: CellDetailComponent },
{ path: '', redirectTo: '/welcome', pathMatch: 'full'}, // default route
{ path: '**', component: WelcomeComponent } // PathNotFound route
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
What am I doing wrong?
