Angular 2站点页面刷新在本地主机上工作，但在live server上刷新时显示404错误

我用Angular 2创建了一个网站。我已经在生产中的linux服务器上部署了该站点。当我单击导航上的链接时，这些路由似乎工作正常，但在刷新页面时显示404错误。在本地主机上似乎一切都正常，但在实时服务器上却不正常。我甚至尝试过使用HashLocationStrategy，但没有效果

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { RulesComponent } from './rules/rules.component';
import { DownloadsComponent } from './downloads/downloads.component';
import { RegisterComponent } from './register/register.component';
import { ContactComponent } from './contact/contact.component';

const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'about', component: AboutComponent},
    {path: 'rules', component: RulesComponent},
    {path: 'downloads', component: DownloadsComponent},
    {path: 'register', component: RegisterComponent},
    {path: 'contact', component: ContactComponent}
];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { routing, appRoutingProviders } from './app.routing';
import { HeaderComponent } from './header.component';
import { FooterComponent } from './footer.component';
import { NavComponent } from './nav.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { RulesComponent } from './rules/rules.component';
import { DownloadsComponent } from './downloads/downloads.component';
import { RegisterComponent } from './register/register.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NavComponent,
    HomeComponent,
    AboutComponent,
    RulesComponent,
    DownloadsComponent,
    RegisterComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy} ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

我的基本href是“/”。我做错什么了吗？提前感谢。

您需要将服务器配置为将除文件（例如API）之外的所有请求重定向到根目录下的index.html，以便Angular Router可以处理路由

我假设这是在开发服务器上完成的，因此您需要使用相同的设置配置生产服务器。它与

base href

或

位置策略

无关（假设您已经让它们与您的开发服务器一起工作），而是生产服务器应该具有的

重写规则

如果您使用的是Apache，请尝试以下方法：

<Directory /var/www/html/yourproject>
    Options Indexes FollowSymLinks
    RewriteEngine On
    RewriteBase /yourproject
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /yourproject/index.html [L]
</Directory>


选项索引跟随符号链接
重新启动发动机
重写基础/你的项目
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/yourproject/index.html[L]

编辑：我假设您在根级别的域（例如：www.yoursite.com、yourapp.somedomain.com）上提供应用程序。如果应用程序根URL类似于
www.somedomain.com/someapp
，那么您需要设置适当的
base href
绑定。
您需要配置服务器，将除文件（例如API）以外的所有请求重定向到根目录下的index.html，以便Angular Router可以处理路由

我假设这是在开发服务器上完成的，因此您需要使用相同的设置配置生产服务器。它与
base href
或
位置策略
无关（假设您已经让它们与您的开发服务器一起工作），而是生产服务器应该具有的
重写规则

如果您使用的是Apache，请尝试以下方法：

<Directory /var/www/html/yourproject>
    Options Indexes FollowSymLinks
    RewriteEngine On
    RewriteBase /yourproject
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /yourproject/index.html [L]
</Directory>


选项索引跟随符号链接
重新启动发动机
重写基础/你的项目
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/yourproject/index.html[L]

编辑：我假设您在根级别的域（例如：www.yoursite.com、yourapp.somedomain.com）上提供应用程序。如果应用程序根URL类似于
www.somedomain.com/someapp
，则需要设置适当的
base href
绑定