角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>