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

我还使用了

添加了.htaccess

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

但仍然没有运气。

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之前，我必须转到“home”，即MyComp1，路由，刷新页面，然后导航到我想刷新MyComp2的那个，但现在我可以刷新任何一个路由和它装得很好。

我也使用routerLink

导航到路线

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

角度2在刷新时找不到路线

1 个答案: