角2找不到刷新路線

Question

我開發了一個簡單的應用程序，遵循angular 2 quickstart。它在lite-server中正確運行。 現在我嘗試運行安裝在htdocs/foo下的apache中的相同的應用程序，但刷新後，我得到「未找到對象」。

baseHref
的index.html：

<base href="/foo"> 

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

我還添加使用

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

的的.htaccess

但仍然沒有運氣。

在apache配置中是否存在缺少的東西？

Answer 1

我有同樣的問題，我解決它使用HashLocationStrategy

所以在我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看起來像這樣

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>