Angular 2: 404 Fehler auftreten, wenn ich durch den Browser aktualisieren

Ich bin neu in Angular 2. Ich habe meine einseitige Anwendung auf meinem Server in einem Ordner namens “myapp” gespeichert. Ich habe die URL in der Basis in http://example.com/myapp/ `geändert.

Mein Projekt hat zwei Seiten. Also implementiere ich Angular 2 Routing. Ich habe die Standardseite als Login festgelegt. Wenn ich in meinem Browser http://example.com/myapp/ eintippe, wird es automatisch auf http://example.com/myapp/login umgeleitet. Aber wenn ich diese Seite aktualisiere, bekomme ich einen Fehler 404 , der besagt, dass http://example.com/myapp/login nicht gefunden wird.

Aber wenn ich mein Projekt mit dem Lite-Server starte, funktioniert alles. In diesem Fall ist die URL in index.html "/" . Wie repariere ich es?

    Tatsächlich ist es normal, dass Sie einen Fehler 404 haben, wenn Sie Ihre Anwendung aktualisieren, da die tatsächliche Adresse im Browser aktualisiert wird (und ohne # / Hashbang-Ansatz). Standardmäßig wird der HTML5-Verlauf für die Wiederverwendung in Angular2 verwendet.

    Um den Fehler 404 zu beheben, müssen Sie Ihren Server aktualisieren, damit er die Datei index.html für jeden von Ihnen definierten index.html .

    Wenn Sie zum HashBang-Ansatz wechseln möchten, müssen Sie diese Konfiguration verwenden:

     import {bootstrap} from 'angular2/platform/browser'; import {provide} from 'angular2/core'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {LocationStrategy, HashLocationStrategy} from '@angular/common'; import {MyApp} from './myapp'; bootstrap(MyApp, [ ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy} ]); 

    Wenn Sie die Seite aktualisieren, wird sie in diesem Fall erneut angezeigt (Sie haben jedoch ein # in Ihrer Adresse).

    Dieser Link könnte dir auch helfen: Wenn ich meine Website aktualisiere, bekomme ich einen 404. Dies ist mit Angular2 und Firebase .

    Hoffe es hilft dir, Thierry

    Update für Angular 2 endgültige Version

    In app.module.ts:

    • Importe hinzufügen:

       import { HashLocationStrategy, LocationStrategy } from '@angular/common'; 
    • Und im NgModule-Anbieter fügen Sie hinzu:

       {provide: LocationStrategy, useClass: HashLocationStrategy} 

    Beispiel (app.module.ts):

     import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HashLocationStrategy, LocationStrategy } from '@angular/common'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}], bootstrap: [AppComponent], }) export class AppModule {} 

    Alternative

    Verwenden Sie RouterModule.forRoot mit dem Argument {useHash: true}.

    Beispiel: (aus eckigen Dokumenten )

     import { NgModule } from '@angular/core'; ... const routes: Routes = [//routes in here]; @NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot(routes, { useHash: true }) ], bootstrap: [AppComponent] }) export class AppModule { } 

    Für Leute (wie mich), die PathLocationStrategy (dh html5Mode) anstelle von HashLocationStrategy , siehe How to: Konfigurieren Sie Ihren Server so, dass er mit html5Mode von einem Wiki eines Drittanbieters funktioniert :

    Wenn Sie html5Mode aktiviert haben, wird das Zeichen # in Ihren URLs nicht mehr verwendet. Das Symbol # ist nützlich, da es keine serverseitige Konfiguration erfordert. Ohne # sieht die URL viel schöner aus, erfordert aber auch serverseitige Neuschreibungen.

    Hier kopiere ich nur drei Beispiele aus dem Wiki, falls das Wiki verloren gehen sollte. Weitere Beispiele finden Sie im Suchwort “URL rewrite” (zB diese Antwort für Firebase).

    Apache

      ServerName my-app DocumentRoot /path/to/app  RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow HTML5 state links RewriteRule ^ index.html [L]   

    Dokumentation für das Umschreibmodul

    nginx

     server { server_name my-app; root /path/to/app; location / { try_files $uri $uri/ /index.html; } } 

    Dokumentation für try_files

    IIS

                   

    Ich hatte das gleiche Problem. Meine Angular-Anwendung läuft auf einem Windows-Server.

    Ich habe dieses Problem getriggers, indem ich eine Datei web.config im Stammverzeichnis erstellt habe .

     < ?xml version="1.0" encoding="UTF-8"?>                 

    Vielleicht können Sie es tun, während Sie Ihre root mit RouterModule registrieren. Sie können ein zweites Objekt mit der Eigenschaft “useHash: true” wie folgt übergeben:

     import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { ROUTES } from './app.routes'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], RouterModule.forRoot(ROUTES ,{ useHash: true }),], providers: [], bootstrap: [AppComponent], }) export class AppModule {} 

    Wenn Sie Angular 2 über ASP.NET Core 1 in Visual Studio 2015 ausführen, ist diese Lösung von Jürgen Gutsch möglicherweise hilfreich. Er beschreibt es in einem Blogpost . Es war die beste Lösung für mich. Platzieren Sie den unten angegebenen C # -Code in Ihrer öffentlichen Startup.cs-Datei void Configure () kurz vor app.UseStaticFiles ();

     app.Use( async ( context, next ) => { await next(); if( context.Response.StatusCode == 404 && !Path.HasExtension( context.Request.Path.Value ) ) { context.Request.Path = "/index.html"; await next(); } }); 

    Für Leute, die dies lesen, die Angular 2 rc4 oder später verwenden, scheint es, dass LocationStrategy vom Router zum Common verschoben wurde. Sie müssen es von dort importieren.

    Beachten Sie auch die geschweiften Klammern um die Zeile ‘Bereitstellen’.

    main.ts

     // Imports for loading & configuring the in-memory web api import { XHRBackend } from '@angular/http'; // The usual bootstrapping imports import { bootstrap } from '@angular/platform-browser-dynamic'; import { HTTP_PROVIDERS } from '@angular/http'; import { AppComponent } from './app.component'; import { APP_ROUTER_PROVIDERS } from './app.routes'; import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common'; bootstrap(AppComponent, [ APP_ROUTER_PROVIDERS, HTTP_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy} ]);