アングル2リフレッシュ時にルートが見つからない

Question

私はangular 2 quickstartの後に簡単なアプリケーションを開発しました。 lite-serverで正しく動作します。 今、私は同じアプリケーションをhtdocs/fooの下でApacheにインストールしようとしていますが、リフレッシュ時に "Object not found"が表示されています。

baseHref
のindex.html：

<base href="/foo"> 

ルーティング
app.rounting.ts：私も

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

を使用して.htaccessファイルを追加した

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

しかし、まだ運がありません。

Apacheの設定には何か不足していますか？

Answer 1

私は同じ問題を抱えていた、私は、だから私の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 { } 

にそれから私のapp.routing.tsは、私は、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); 

たいに見えるHashLocationStrategy

を使用して、それを解決しました「MyComp1」と呼ばれ、ルート、リフレッシュページと呼ばれる「家」に行き、MyComp2をリフレッシュしたいものに移動しなければならないが、n私のルートのいずれかからリフレッシュすることができ、うまくロードされます。

また、私はrouterLink

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