Ich verwende die Version Angular 2.0.0-alpha.30. Wenn Sie zu einer anderen Route umleiten, aktualisieren Sie den Browser, und es wird "Kann nicht abgerufen / Route angezeigt" angezeigt.
Können Sie mir helfen, herauszufinden, warum dieser Fehler aufgetreten ist?
angular
angular2-routing
Vinz und Tonz
quelle
quelle
Antworten:
Wenn Sie HTML5-Routing verwenden, müssen Sie alle Routen in Ihrer App (derzeit 404) index.html auf Ihrer Serverseite zuordnen . Hier sind einige Optionen für Sie:
Verwenden des Live-Servers: https://www.npmjs.com/package/live-server
Verwenden von Nginx: http://nginx.org/en/docs/beginners_guide.html
Tomcat - Konfiguration von web.xml. Aus Kunins Kommentar
quelle
pub serve
? Auf diese Weise brauche ichpub build
während der Entwicklung nicht viel. Ich habe es versucht, aber esproxy_pass
funktioniert nicht sehr guterror_page
.Haftungsausschluss: Dieses Update funktioniert mit Alpha44
Ich hatte das gleiche Problem und löste es durch Implementierung der HashLocationStrategy, die in der Angular.io-API-Vorschau aufgeführt ist.
https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
Beginnen Sie mit dem Importieren der erforderlichen Anweisungen
Und zum Schluss booten Sie alles so zusammen
Ihre Route wird als http: // localhost / # / route angezeigt. Wenn Sie sie aktualisieren, wird sie an der richtigen Stelle neu geladen.
Hoffentlich hilft das!
quelle
#
bei dem die URL automatisch hinzugefügt wird. Gibt es eine Lösung, um # mit dieser Option aus der URL zu entfernen?#
wäre optimal.PathLocationStrategy
aber das funktioniert bei mir nicht. Entweder habe ich eine falsche Methode verwendet oder ich weiß nicht, wie ich PathLocationStrategy verwenden soll.Angular verwendet standardmäßig HTML5-Pushstate (
PathLocationStrategy
im Angular-Slang).Sie benötigen entweder einen Server, der alle angeforderten Anforderungen verarbeitet,
index.html
oder Sie wechseln zuHashLocationStrategy
(mit # in der URL für Routen) https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class. htmlSiehe auch https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/
Um zu
HashLocationStrategy
verwenden, um zu verwendenUpdate für> = RC.5 und 2.0.0 final
oder kürzer mit
useHash
Stellen Sie sicher, dass Sie alle erforderlichen Importe haben
Für den neuen (RC.3) Router
kann auch 404 verursachen.
Es erfordert stattdessen
Update für> = RC.x.
Update für> = Beta.16 Importe haben sich geändert
<beta.16
Siehe auch https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 breaking-Änderungen
quelle
update for >= RC.x
(RC.2) funktioniert mitrouter 3.0.0-alpha.7
, wird jedochprovide
als veraltet bezeichnet, ohne dass Informationen darüber vorliegen , welche Funktion es ersetzt hat.{provide: SomeClass, useClass: OtherClass}
Ich denke, der Fehler, den Sie sehen, ist, dass Sie http: // localhost / route anfordern, das nicht existiert. Sie müssen sicherstellen, dass Ihr Server alle Anforderungen Ihrer Hauptseite index.html zuordnet.
Da Angular 2 standardmäßig HTML5-Routing verwendet, anstatt Hashes am Ende der URL zu verwenden, sieht das Aktualisieren der Seite wie eine Anforderung für eine andere Ressource aus.
quelle
Dies ist in allen Router-Versionen häufig der Fall, wenn Sie die Standard-HTML-Standortstrategie verwenden.
Was passiert ist, dass die URL in der Browserleiste eine normale vollständige HTML-URL ist, wie zum Beispiel :
http://localhost/route
.Wenn wir also in der Browserleiste die Eingabetaste drücken, wird eine tatsächliche HTTP-Anforderung an den Server gesendet, um eine Datei mit dem Namen zu erhalten
route
.Der Server verfügt nicht über eine solche Datei, und auf dem Server ist auch kein Express konfiguriert, um die Anforderung zu verarbeiten und eine Antwort bereitzustellen. Daher gibt der Server 404 Not Found zurück, da die
route
Datei nicht gefunden werden konnte .Wir möchten, dass der Server die
index.html
Datei zurückgibt, die die Einzelseitenanwendung enthält. Dann sollte der Router die/route
URL aktivieren und die ihm zugeordnete Komponente anzeigen.Um das Problem zu beheben, müssen wir den Server so konfigurieren, dass er zurückgibt
index.html
(vorausgesetzt, dies ist der Name Ihrer Einzelseiten-Anwendungsdatei), falls die Anforderung nicht verarbeitet werden konnte, im Gegensatz zu einer 404 Not Found.Die Vorgehensweise hängt von der verwendeten serverseitigen Technologie ab. Wenn es sich beispielsweise um Java handelt, müssen Sie möglicherweise ein Servlet schreiben, in Rails ist es anders usw.
Um ein konkretes Beispiel zu geben: Wenn Sie beispielsweise NodeJs verwenden, müssten Sie eine Middleware wie diese schreiben:
Und registrieren Sie es dann ganz am Ende der Middleware-Kette:
Dies dient dazu,
index.html
anstatt einen 404 zurückzugeben, der Router wird eingeschaltet und alles wird wie erwartet funktionieren.quelle
Stellen Sie sicher, dass dies im head-Element Ihrer index.html platziert ist:
Das Beispiel in der Angular2 Routing & Navigation- Dokumentation verwendet stattdessen den folgenden Code im Kopf (sie erklären, warum in der Live-Beispielnotiz der Dokumentation):
Wenn Sie eine Seite aktualisieren, wird die Basis-HREF dynamisch auf Ihre aktuelle document.location gesetzt. Ich konnte sehen, dass dies einige Verwirrung bei den Leuten hervorrief, die die Dokumentation überflogen und versuchten, den Plunker zu replizieren.
quelle
Wenn Sie URLs im Browser eingeben möchten, ohne Ihren AppServer so zu konfigurieren, dass alle Anforderungen an index.html verarbeitet werden, müssen Sie HashLocationStrategy verwenden .
Der einfachste Weg zur Konfiguration ist:
Anstatt:
Mit HashLocationStrategy werden Ihre URLs wie folgt aussehen:
quelle
#
von der URL, können wir das entfernen?Ich hatte das gleiche Problem mit der Verwendung von Webpack-Dev-Server. Ich musste die devServer-Option zu meinem Webpack hinzufügen.
Lösung:
quelle
Wenn Sie Apache oder Nginx als Server verwenden, müssen Sie eine
.htaccess
RewriteEngine (falls noch nicht erstellt) und "On" erstellenquelle
Mein Server ist Apache. Was ich getan habe, um 404 beim Aktualisieren oder Deep Linking zu reparieren, ist sehr einfach. Fügen Sie einfach eine Zeile in apache vhost config hinzu:
Damit jeder 404-Fehler zu index.html umgeleitet wird, was Angular2-Routing wünscht.
Beispiel für die gesamte vhost-Datei:
Egal welchen Server Sie verwenden, ich denke, der springende Punkt ist, herauszufinden, wie Sie den Server so konfigurieren können, dass er 404 zu Ihrer index.html umleitet.
quelle
Die Serverkonfiguration ist keine Lösung für ein SPA, denke sogar ich. Sie möchten ein eckiges SPA nicht erneut laden, wenn eine falsche Route eingeht, oder? Ich werde also nicht von einer Serverroute abhängig sein und zu einer anderen Route umleiten, aber ja, ich werde index.html alle Anforderungen für Winkelrouten des Winkel-App-Pfads verarbeiten lassen.
Versuchen Sie dies anstelle von anderen oder falschen Routen. Es funktioniert für mich, nicht sicher, scheint aber in Arbeit zu sein. Ich bin selbst darüber gestolpert, als ich vor einem Problem stand.
https://github.com/angular/angular/issues/4055
Denken Sie jedoch daran, Ihre Serverordner und Zugriffsrechte zu konfigurieren, falls Sie HTML- oder Web-Skripte haben, die kein SPA sind. Sonst werden Sie Probleme haben. Für mich war es bei Problemen wie Ihnen eine Mischung aus Serverkonfiguration und höher.
quelle
Bearbeiten Sie für die schnelle Korrektur von Winkel 5 app.module.ts und fügen Sie sie
{useHash:true}
nach den appRoutes hinzu.quelle
Angular Apps sind perfekte Kandidaten für die Bereitstellung mit einem einfachen statischen HTML-Server. Sie benötigen keine serverseitige Engine, um Anwendungsseiten dynamisch zu erstellen, da Angular dies auf der Clientseite tut.
Wenn die App den Angular-Router verwendet, müssen Sie den Server so konfigurieren, dass die Hostseite der Anwendung (index.html) zurückgegeben wird, wenn Sie nach einer Datei gefragt werden, über die sie nicht verfügt.
Eine geroutete Anwendung sollte "Deep Links" unterstützen. Ein Deep Link ist eine URL, die einen Pfad zu einer Komponente in der App angibt. Zum Beispiel ist http://www.example.com/heroes/42 ein tiefer Link zur Heldendetailseite, auf der der Held mit der ID: 42 angezeigt wird.
Es gibt kein Problem, wenn der Benutzer von einem laufenden Client aus zu dieser URL navigiert. Der Angular-Router interpretiert die URL und leitet sie zu dieser Seite und diesem Helden weiter.
Wenn Sie jedoch auf einen Link in einer E-Mail klicken, ihn in die Adressleiste des Browsers eingeben oder den Browser lediglich auf der Heldendetailseite aktualisieren, werden alle diese Aktionen vom Browser selbst außerhalb der laufenden Anwendung ausgeführt. Der Browser fordert den Server direkt unter Umgehung des Routers an.
Ein statischer Server gibt routinemäßig index.html zurück, wenn er eine Anforderung für http://www.example.com/ erhält . Es lehnt jedoch http://www.example.com/heroes/42 ab und gibt den Fehler 404 - Nicht gefunden zurück, es sei denn, es ist so konfiguriert, dass stattdessen index.html zurückgegeben wird
Wenn dieses Problem in der Produktion aufgetreten ist, führen Sie die folgenden Schritte aus
1) Fügen Sie eine Web.Config-Datei im Ordner src Ihrer Winkelanwendung hinzu. Geben Sie den folgenden Code ein.
2) Fügen Sie in angle-cli.json einen Verweis darauf hinzu. Fügen Sie in angle-cli.json Web.config wie unten gezeigt in den Assets-Block ein.
3) Jetzt können Sie die Lösung für die Produktion mit erstellen
Dadurch wird ein dist-Ordner erstellt. Die Dateien im Ordner dist können in jedem Modus bereitgestellt werden.
quelle
Sie können diese Lösung für mittlere Anwendungen verwenden. Ich habe ejs als Ansichtsmodul verwendet:
und auch in angle-cli.json gesetzt
es wird gut funktionieren statt
Das Problem beim Abrufen von Datenbankaufrufen und beim Zurückgeben von index.html
quelle
Für diejenigen von uns, die sich durch das Leben in IIS kämpfen: Verwenden Sie den folgenden PowerShell-Code, um dieses Problem basierend auf den offiziellen Angular 2-Dokumenten zu beheben (die jemand in diesem Thread gepostet hat? Http://blog.angular-university.io/angular2-router/ )
Dadurch wird der 404 gemäß dem Vorschlag in den Angular 2-Dokumenten (Link oben) in die Datei /index.html umgeleitet.
quelle
Sie können unten ausprobieren. Für mich geht das!
main.component.ts
Sie können path.strub (2) weiter verbessern, um es in Router-Parameter aufzuteilen. Ich benutze Angular 2.4.9
quelle
Ich füge nur .htaccess in root hinzu.
Hier füge ich einfach den Punkt '.' (übergeordnetes Verzeichnis) in /index.html zu ./index.html hinzu. Stellen Sie
sicher, dass Ihre index.html-Datei im Basispfad der Hauptverzeichnispfad ist und im Build des Projekts festgelegt ist.
quelle
Ich wollte den URL-Pfad von Unterseiten im HTML5-Modus beibehalten, ohne zum Index zurückzuleiten, und keine der Lösungen hat mir gesagt, wie das geht. So habe ich es erreicht:
Erstellen Sie einfache virtuelle Verzeichnisse in IIS für alle Ihre Routen und verweisen Sie sie auf das App-Stammverzeichnis.
Wickeln Sie Ihren system.webServer in Ihre Web.config.xml mit diesem Standort-Tag ein. Andernfalls werden beim Laden von Web.config ein zweites Mal mit dem virtuellen Verzeichnis doppelte Fehler angezeigt:
quelle
Ich habe in eckigen 2 Samen eingecheckt, wie es funktioniert.
Sie können Express-History-API-Fallback verwenden , um beim erneuten Laden einer Seite automatisch umzuleiten.
Ich denke, es ist der eleganteste Weg, um dieses Problem IMO zu lösen.
quelle
Wenn Sie PathLocationStrategy verwenden möchten:
Einzelseitenanwendung mit Java EE / Wildfly: serverseitige Konfiguration
quelle
2017-Juli-11: Da dies mit einer Frage verknüpft ist , die dieses Problem hat, aber Angular 2 mit Electron verwendet, werde ich hier meine Lösung hinzufügen.
Alles was ich tun musste war
<base href="./">
aus meiner index.html zu entfernen und Electron begann die Seite erneut erfolgreich neu zu laden.quelle
Importe hinzufügen:
Fügen Sie im NgModule-Anbieter Folgendes hinzu:
Ändern Sie in der Datei index.html der App die Basis href in
./index.html
von/
Wenn die App auf einem beliebigen Server bereitgestellt wird, gibt sie eine echte URL für die Seite an, auf die von jeder externen Anwendung aus zugegriffen werden kann.
quelle
Fügen Sie einfach .htaccess in root Resolution 404 hinzu, während Sie die Seite in Angular 4 Apache2 aktualisieren.
quelle
Ich denke, Sie bekommen 404, weil Sie http: // localhost / route anfordern das auf dem Tomcat-Server nicht vorhanden ist. Da Angular 2 standardmäßig HTML 5-Routing verwendet, anstatt Hashes am Ende der URL zu verwenden, sieht das Aktualisieren der Seite wie eine Anforderung für eine andere Ressource aus.
Wenn Sie Angular Routing auf Tomcat verwenden, müssen Sie sicherstellen, dass Ihr Server alle Routen in Ihrer App Ihrer Hauptindex.html zuordnet, während Sie die Seite aktualisieren. Es gibt mehrere Möglichkeiten, dieses Problem zu beheben. Was auch immer zu Ihnen passt, Sie können sich dafür entscheiden.
1) Fügen Sie den folgenden Code in die Datei web.xml Ihres Bereitstellungsordners ein:
2) Sie können auch versuchen, HashLocationStrategy mit # in der URL für Routen zu verwenden:
Versuchen Sie es mit:
RouterModule.forRoot (Routen, {useHash: true})
Anstatt:
RouterModule.forRoot (Routen)
Mit HashLocationStrategy werden Ihre URLs wie folgt aussehen:
http: // localhost / # / route
3) Tomcat URL Rewrite Valve: Schreiben Sie die URLs mithilfe einer Konfiguration auf Serverebene neu, um sie zu index.html umzuleiten, wenn die Ressource nicht gefunden wird.
3.1) Erstellen Sie im Ordner META-INF eine Datei context.xml und kopieren Sie den folgenden Kontext hinein.
3.2) Erstellen Sie in WEB-INF die Datei rewrite.config (diese Datei enthält die Regel für das Umschreiben von URLs und wird von Tomcat zum Umschreiben von URLs verwendet). Kopieren Sie in rewrite.config den folgenden Inhalt:
quelle
Dies ist nicht die richtige Antwort, aber bei der Aktualisierung können Sie alle toten Anrufe auf die Homepage umleiten, indem Sie die 404-Seite opfern. Dies ist ein vorübergehender Hack, der nur in der Datei 404.html wiederholt wird
quelle
Die beste Lösung, um den "Router, der nicht am Neuladen des Browsers arbeitet" zu beheben, besteht darin, Spa-Fallback zu verwenden. Wenn Sie eine Angular2-Anwendung mit asp.net-Kern verwenden, müssen Sie diese auf der Seite "StartUp.cs" definieren. unter MVC-Routen. Ich füge den Code hinzu.
quelle
Die Antwort ist ziemlich schwierig. Wenn Sie einen einfachen alten Apache-Server (oder IIS) verwenden, tritt das Problem auf, da die Angular-Seiten nicht wirklich vorhanden sind. Sie werden aus der Winkelroute "berechnet".
Es gibt verschiedene Möglichkeiten, um das Problem zu beheben. Eine besteht darin, die von Angular angebotene HashLocationStrategy zu verwenden . In der URL wird jedoch ein scharfes Zeichen hinzugefügt. Dies dient hauptsächlich der Kompatibilität mit Angular 1 (nehme ich an). Tatsache ist, dass der Teil nach dem scharfen Teil nicht Teil der URL ist (dann löst der Server den Teil vor dem "#" - Zeichen auf). Das kann perfekt sein.
Hier eine erweiterte Methode (basierend auf dem 404-Trick). Ich gehe davon aus, dass Sie eine "verteilte" Version Ihrer Winkelanwendung haben (
ng build --prod
Angular- wenn Sie Angular-CLI verwenden) und Sie direkt mit Ihrem Server auf die Seiten zugreifen und PHP aktiviert ist.Wenn Ihre Website auf Seiten basiert (z. B. Wordpress) und Sie nur einen Ordner für Angular haben (in meinem Beispiel "dist" genannt), können Sie etwas Seltsames tun, aber am Ende einfach. Ich gehe davon aus, dass Sie Ihre Angular-Seiten in "/ dist" (mit dem entsprechenden
<BASE HREF="/dist/">
) gespeichert haben . Verwenden Sie jetzt eine 404-Umleitung und die Hilfe von PHP.In Ihrer Apache-Konfiguration (oder in der
.htaccess
Datei Ihres eckigen Anwendungsverzeichnisses) müssen Sie hinzufügenErrorDocument 404 /404.php
Die 404.php startet mit folgendem Code:
Wo
$angular
ist der Wert, der in der HREF Ihres Winkels gespeichert ist?index.html
.Das Prinzip ist recht einfach: Wenn Apache die Seite nicht findet, wird eine 404-Umleitung zum PHP-Skript vorgenommen. Wir prüfen nur, ob sich die Seite im eckigen Anwendungsverzeichnis befindet. In diesem Fall laden wir die index.html einfach direkt (ohne umzuleiten): Dies ist erforderlich, um die URL unverändert zu lassen. Wir ändern auch den HTTP-Code von 404 auf 200 (nur besser für Crawler).
Was ist, wenn die Seite in der Winkelanwendung nicht vorhanden ist? Nun, wir verwenden das "catch all" des Angular-Routers (siehe Dokumentation zum Angular-Router).
Diese Methode funktioniert mit einer eingebetteten Angular-Anwendung innerhalb einer einfachen Website (ich denke, dass dies in Zukunft der Fall sein wird).
ANMERKUNGEN:
mod_redirect
(durch Umschreiben der URLs) ist überhaupt keine gute Lösung, da Dateien (wie Assets) wirklich geladen werden müssen, dann ist es viel riskanter als nur die "nicht gefundene" Lösung zu verwenden.ErrorDocument 404 /dist/index.html
Works, aber Apache antwortet immer noch mit einem 404-Fehlercode (was für Crawler schlecht ist).quelle
Dies ist keine dauerhafte Lösung für das Problem, sondern eher eine Problemumgehung oder ein Hack
Ich hatte genau das gleiche Problem bei der Bereitstellung meiner Angular App auf Gh-Seiten. Zuerst wurde ich mit 404 Nachrichten begrüßt, als ich meine Seiten auf Gh-Seiten aktualisierte.
Dann, wie @gunter darauf hinwies, fing ich an zu benutzen
HashLocationStrategy
das mit Angular 2 gelieferte zu verwenden.Aber das brachte seine eigenen Probleme mit sich, die
#
in der URL wirklich schlecht waren und die URL so seltsam aussehen ließenhttps://rahulrsingh09.github.io/AngularConcepts/#/faq
.Ich begann über dieses Problem zu recherchieren und stieß auf einen Blog. Ich habe versucht, es zu versuchen, und es hat funktioniert.
Hier ist, was ich getan habe, wie in diesem Blog erwähnt.
Referenz- Backalleycoder Vielen Dank an @Daniel für diese Problemumgehung.
Jetzt ändert sich die obige URL in https://rahulrsingh09.github.io/AngularConcepts/faq
quelle
Ich habe dies behoben (mithilfe des Java / Spring-Backends), indem ich einen Handler hinzugefügt habe, der mit allen in meinen Angular-Routen definierten Elementen übereinstimmt und index.html anstelle eines 404 zurücksendet. Dadurch wird die Anwendung effektiv (neu) gebootet und die richtige Seite geladen. Ich habe auch einen 404-Handler für alles, was davon nicht erfasst wird.
quelle
Wenn Sie Apache oder Nginx als Server verwenden, müssen Sie einen .htaccess erstellen
quelle