eckig 2 nicht finden Route auf aktualisieren

Question

Ich habe eine einfache App nach der angular 2 quickstart entwickeln. Es läuft korrekt im Lite-Server. Jetzt versuche ich, die gleiche Anwendung in Apache unter htdocs/foo ausgeführt, aber bei der Aktualisierung bekomme ich "Objekt nicht gefunden".

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 
    } 
]; 

Ich habe auch die .htaccess

<ifModule mod_rewrite.c> 
    Options +FollowSymLinks 
    IndexIgnore */* 
    RewriteEngine On 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule (.*) index.html 
</ifModule> 

mit hinzugefügt

Aber immer noch kein Glück.

Gibt es etwas, das ich in der Apache-Konfiguration vermisse?

Answer 1

ich hatte das gleiche Problem, ich löste es das dann HashLocationStrategy

Also in meinem 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 { } 

mit meinem app.routing.ts, wie dies vor dem HashLocationStrategy

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); 

aussieht, würde ich gehe zu "home", aka MyComp1, route, aktualisiere die Seite und navigiere dann zu der, die ich MyComp2 aktualisieren wollte, aber n ow ich kann von jeder meiner Routen aktualisieren und es lädt gut.

Auch steuere ich die Routen der routerLink

<a routerLink="/mycomp1" routerLinkActive="active">My Comp1</a> 
<a [routerLink]="['mycomp2', myObj.id]" routerLinkActive="active">My Comp2</a>