Angular 2 Seitenauffrischung funktioniert auf localhost aber zeigt 404 Fehler bei Aktualisierung auf Live-Server

Question

Ich habe eine Website mit Angular 2 erstellt. Ich habe die Website auf einem Linux-Server in der Produktion bereitgestellt. Die Routen scheinen gut zu funktionieren, wenn ich auf die Links in der Navigation klicke, aber beim Aktualisieren der Seite wird der Fehler 404 angezeigt. Alles scheint auf dem lokalen Host gut zu funktionieren, aber nicht auf dem Live-Server. Ich habe sogar versucht, HashLocationStrategy, aber ohne Erfolg.

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 { } 

My base href "/" ist. Gibt es irgendetwas, was ich falsch mache? Danke im Voraus.

Answer 1

Sie müssen den Server so konfigurieren, dass alle Anfragen mit Ausnahme von Dateien (und APIs zum Beispiel) an index.html im Stammverzeichnis umgeleitet werden, sodass Angular Router die Routen verarbeiten kann.

Ich nehme an, dass das auf Ihrem Entwicklungsserver getan wird, also müssen Sie Ihren Produktionsserver mit den gleichen Einstellungen konfigurieren. Es ist nicht verwandt mit oder location strategy (vorausgesetzt, Sie haben sie mit Ihrem Entwicklungsserver arbeiten), es ist alles über die rewrite rules für den Produktionsserver sollte.

Wenn Sie Apache verwenden, versuchen Sie dies:

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

Edit: ich davon ausgegangen, dass Sie die App auf einem Root-Level-Domain (ex dienen: www.yoursite.com, yourapp.somedomain .com). Wenn die App-Stamm-URL wie folgt lautet: , müssen Sie die entsprechenden -Bindungen festlegen.