angular 2 not finding route on refresh

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>