angular 2 not finding route on refresh - .htaccess

Question

I have develop a simple app following the angular 2 quickstart. It runs correctly in the lite-server.
Now I try to run the same application installed in apache under htdocs/foo but upon refresh, I am getting "Object not found".
baseHref
index.html:
<base href="/foo">
Routing
app.rounting.ts:
const appRoutes: Routes = [
{
path: 'sched',
component: ScheduleFormComponent
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'sched-detail/:id',
component: ConsultationDetailComponent
}
];
I have also added the .htaccess using
<ifModule mod_rewrite.c>
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html
</ifModule>
But still no luck.
Is there something I am missing in the apache config?

Answer 1

I had the same problem, I solved it using the HashLocationStrategy
So in my app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { HashLocationStrategy, LocationStrategy } from '#angular/common';
import { AppComponent } from './app.component';
import { MyComp1 } from './comp1/comp1.component';
import { MyComp2 } from './comp2/comp2.component';
import { routing } from './app.routing';
import 'rxjs/Rx';
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
declarations: [
AppComponent,
MyComp1,
MyComp2
],
providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy} ],
bootstrap: [AppComponent],
})
export class AppModule { }
Then my app.routing.ts looks like this
import { Routes, RouterModule } from '#angular/router';
import { MyComp1 } from './comp1/comp1.component';
import { MyComp2 } from './comp2/comp2.component';
const appRoutes: Routes = [
{
path: '',
redirectTo: 'mycomp1',
pathMatch: 'full'
},
{
path: 'mycomp1',
component: MyComp1
},
{
path: 'mycomp2/:id',
component: MyComp2
},
{ path: '**', redirectTo: 'mycomp1', }
];
export const routing = RouterModule.forRoot(appRoutes);
Before the HashLocationStrategy, I would have to go to the "home", aka MyComp1, route, refresh page, and then navigate to the one I wanted to refresh MyComp2, but now I can refresh from any one of my routes and it loads up fine.
Also I navigate to the routes using the routerLink
<a routerLink="/mycomp1" routerLinkActive="active">My Comp1</a>
<a [routerLink]="['mycomp2', myObj.id]" routerLinkActive="active">My Comp2</a>