Angular 2網站頁面刷新在localhost上工作，但在活動服務器上刷新顯示404錯誤

我製作了一個使用Angular 2的網站。我已經在生產中的一臺linux服務器上部署了該網站。當我單擊導航上的鏈接時，路線似乎工作正常，但當頁面刷新時顯示404錯誤。一切似乎在本地主機上正常工作，但不在現場服務器上。我甚至嘗試使用HashLocationStrategy但無濟於事。Angular 2網站頁面刷新在localhost上工作，但在活動服務器上刷新顯示404錯誤

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是「/」。有什麼我做錯了嗎？提前致謝。

來源

2016-10-03 Gaurav Prabhu

您需要配置服務器以將除文件（例如API）之外的所有請求重定向到根目錄中的index.html，以便Angular Router可以處理這些路由。

我認爲這是在您的開發服務器上完成的，因此您需要使用相同的設置來配置您的生產服務器。這與base href或location strategy（假設您已經讓他們與您的開發服務器一起工作）無關，這與生產服務器應具有的rewrite rules有關。

如果你使用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>

編輯：我以爲你服務於根級域（應用程序例如：www.yoursite.com，yourapp.somedomain .COM）。如果應用程序根URL是www.somedomain.com/some-app，那麼您需要設置合適的base href綁定。

來源

2017-02-25 09:13:52

Angular 2網站頁面刷新在localhost上工作，但在活動服務器上刷新顯示404錯誤

回答

相關問題