wake-up-neo.net

Angular 2.0-Router funktionieren nicht beim Neuladen des Browsers

Ich verwende die Version Angular 2.0.0-alpha.30. Wenn Sie auf eine andere Route umleiten, aktualisieren Sie den Browser und zeigen Sie an, dass die Route nicht angezeigt werden kann.

Können Sie mir helfen, herauszufinden, warum dieser Fehler aufgetreten ist?.

154
Vinz and Tonz

Der Fehler, den Sie sehen, ist, dass Sie http: // localhost/route anfordern, das nicht existiert. Nach Simon .

Wenn Sie html5-Routing verwenden, müssen Sie alle Routen in Ihrer App (derzeit 404) zu index.html zuordnen auf Ihrer Serverseite. Hier sind einige Optionen für Sie:

  1. live-Server verwenden: https://www.npmjs.com/package/live-server

    $live-server --entry-file=index.html

  2. mit nginx: http://nginx.org/de/docs/beginners_guide.html

    error_page 404 /index.html

  3. Tomcat - Konfiguration von web.xml. Aus Kunin s Kommentar

    <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page>

130
Quy Tang

Haftungsausschluss: Dieses Update funktioniert mit Alpha44

Ich hatte das gleiche Problem und löste es durch die Implementierung von HashLocationStrategy in der Angular.io-API-Vorschau.

https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

Beginnen Sie mit dem Importieren der erforderlichen Richtlinien

import {provide} from 'angular2/angular2';
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

Und zum Schluss bootstrap alles so zusammen

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

Ihre Route wird als http: // localhost/#/route angezeigt. Wenn Sie die Aktualisierung durchführen, wird sie an ihrem richtigen Ort neu geladen.

Hoffentlich hilft das!

61
SimonHawesome

Angular verwendet standardmäßig den HTML5-Pushstate (PathLocationStrategy in Angular Slang).
Sie benötigen entweder einen Server, der alle Anforderungen verarbeitet, als würde er index.html anfordern, oder Sie wechseln zu HashLocationStrategy (mit # in der URL für Routen) https://angular.io/docs/ts/latest/api/common /index/HashLocationStrategy-class.html

Siehe auch https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-Apache-using-htaccess/

Um zu HashLocationStrategy zu wechseln, verwenden Sie

update für> = RC.5 und 2.0.0 final

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [AppCmp], 
  bootstrap: [AppCmp],
  imports: [BrowserModule, routes],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);

oder kürzer mit useHash

imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...

stellen Sie sicher, dass Sie alle erforderlichen Importe haben

Für den neuen (RC.3) Router 

<base href="."> 

kann auch 404 verursachen.

Es erfordert stattdessen

<base href="/">

update für> = RC.x

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
  // or since RC.2
  {provide: LocationStrategy, useClass: HashLocationStrategy} 
]);

import {provide} from '@angular/core';
import {  
  PlatformLocation,  
  Location,  
  LocationStrategy,  
  HashLocationStrategy,  
  PathLocationStrategy,  
  APP_BASE_HREF}  
from '@angular/common';  

update for> = beta.16 Importe haben sich geändert

import {BrowserPlatformLocation} from '@angular/platform-browser';

import {provide} from 'angular2/core';
import {
  // PlatformLocation,
  // Location,
  LocationStrategy,
  HashLocationStrategy,
  // PathLocationStrategy,
  APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';

<beta.16

import {provide} from 'angular2/core';
import {
  HashLocationStrategy
  LocationStrategy,
  ROUTER_PROVIDERS,
} from 'angular2/router';

Siehe auch https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 Umbruchänderungen

40

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 anstelle von Hashes am Ende der URL verwendet, sieht das Aktualisieren der Seite wie eine Anforderung für eine andere Ressource aus.

26
Simon

Dies ist eine häufige Situation in allen Routerversionen, 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 Sie also in der Browserleiste die Eingabetaste drücken, wird eine tatsächliche HTTP-Anforderung an den Server gesendet, um eine Datei mit dem Namen route abzurufen.

Der Server verfügt nicht über eine solche Datei, und auf dem Server ist weder etwas wie express konfiguriert, um die Anforderung zu bearbeiten und eine Antwort bereitzustellen. Der Server gibt also 404 Not Found zurück, da er die route-Datei nicht finden konnte.

Wir möchten, dass der Server die index.html-Datei mit der Einzelseitenanwendung zurückgibt. Dann sollte der Router die /route-URL einfangen und bearbeiten und die darauf zugeordnete Komponente anzeigen.

Um das Problem zu beheben, müssen Sie den Server so konfigurieren, dass index.html zurückgegeben wird (vorausgesetzt, es handelt sich um den Namen Ihrer Einzelseitenanwendungsdatei), falls die Anforderung nicht bearbeitet werden konnte, im Gegensatz zu 404 Not Found.

Die Vorgehensweise hängt von der verwendeten serverseitigen Technologie ab. Wenn Java beispielsweise ein Servlet schreiben muss, ist es in Rails anders usw. 

Um ein konkretes Beispiel zu geben: Wenn Sie beispielsweise NodeJs verwenden, müssen Sie eine Middleware wie folgt schreiben:

function sendSpaFileIfUnmatched(req,res) {
    res.sendFile("index.html", { root: '.' });
}

Und dann registrieren Sie es ganz am Ende der Middleware-Kette:

app.use(sendSpaFileIfUnmatched);

Dies dient index.html, anstatt einen 404 zurückzugeben, der Router tritt ein und alles funktioniert wie erwartet.

18

Stellen Sie sicher, dass sich dies im head-Element Ihrer index.html befindet:

<base href="/">

Die Example in der Angular2 Routing & Navigation -Dokumentation verwendet stattdessen den folgenden Code im Kopf (sie erklären, warum in der Live-Beispielnotiz der Dokumentation):

<script>document.write('<base href="' + document.location + '" />');</script>

Wenn Sie eine Seite aktualisieren, wird die Basis-Href dynamisch auf Ihre aktuelle document.location gesetzt. Ich konnte sehen, dass dies einige Leute verwirrte, die die Dokumentation überflogen und versuchten, den Plunker zu replizieren.

12
user2263572

Ich hatte das gleiche Problem mit dem Webpack-Dev-Server. Ich musste die Option devServer zu meinem Webpack hinzufügen.

Lösung:

// in webpack
devServer: {
    historyApiFallback: true,
    stats: 'minimal'
}
7
angmerica

Wenn Sie URLs in den Browser eingeben möchten, ohne Ihren AppServer so zu konfigurieren, dass er alle Anforderungen an index.html verarbeitet, müssen Sie HashLocationStrategy verwenden.

Die einfachste Art zu konfigurieren ist die Verwendung von:

RouterModule.forRoot(routes, { useHash: true })

Anstatt:

RouterModule.forRoot(routes)

Mit HashLocationStrategy werden Ihre URLs wie folgt aussehen:

http://server:port/#/path
6
felipecrp

Wenn Sie Apache oder Nginx als Server verwenden, müssen Sie eine .htaccess (falls noch nicht zuvor erstellt) und "On" RewriteEngine erstellen

 RewriteEngine On 
 RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -f [OR] 
 RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -d 
 RewriteRule ^ - [L] 
 RewriteRule ^ /index.html

5
Rakesh Roy

Mein Server ist Apache. Was ich beim Aktualisieren oder Deep Linking zur Behebung von 404 getan habe, ist sehr einfach. Fügen Sie einfach eine Zeile in Apache vhost config hinzu:

ErrorDocument 404 /index.html

Damit wird jeder 404-Fehler zu index.html umgeleitet, was das Routing von angle2 will.

Das gesamte VHOST-Dateibeispiel:

<VirtualHost *:80>

  ServerName fenz.niwa.local

  DirectoryIndex index.html

  ErrorDocument 404 /index.html

  DocumentRoot "/Users/zhoum/Documents/workspace/fire/fire_service/dist"

  ErrorLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.error.log

  CustomLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.access.log combined




  <Directory "/Users/zhoum/Documents/workspace/fire/fire_service/dist">

    AllowOverride All

    Options Indexes FollowSymLinks

    #Order allow,deny

    #Allow from All

    Require all granted

  </Directory>




  Header set Access-Control-Allow-Origin "*"

  Header set Access-Control-Allow-Methods "GET, POST"

  Header set Access-Control-Allow-Credentials "true"

  Header set Access-Control-Allow-Headers "Accept-Encoding"

</VirtualHost>

Egal welchen Server Sie verwenden, ich denke, es geht darum, die Möglichkeiten herauszufinden, wie Sie den Server so konfigurieren können, dass 404 auf Ihre index.html umgeleitet wird.

5
Willie Z

Server-Konfiguration ist keine Lösung für ein SPA, was ich selbst denke. Sie möchten ein Winkel-SPA nicht erneut laden, wenn eine falsche Route eingegeben wird, oder? Also werde ich nicht auf eine Server-Route angewiesen sein und auf eine andere Route umleiten, aber ich lasse index.html alle Anfragen für winklige Routen des Winkel-App-Pfads verarbeiten.

Versuchen Sie dies anstelle von anderen oder falschen Routen. Es funktioniert für mich, ist mir nicht sicher, aber es scheint, als wäre es in Arbeit. Gestolpert dies selbst, wenn ein Problem auftritt.

@RouteConfig([
  { path: '/**', redirectTo: ['MycmpnameCmp'] }, 
   ...
  }
])

https://github.com/angular/angular/issues/4055

Denken Sie jedoch daran, Ihre Serverordner und Zugriffsrechte zu konfigurieren, falls Sie über HTML- oder Web-Skripte verfügen, die kein SPA sind. Sonst wirst du Probleme haben. Bei einem Problem wie Ihnen war es eine Mischung aus Serverkonfiguration und höher.

4
Gary
you can use this solution for mean application

i used ejs as view engine

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

&&

app.use(function (req, res, next) {
    return res.render('index.html');
});

and also set in angular- cli .json
"apps": [
    {
      "root": "src",
      "outDir": "views",

it will work fine instead of 

 app.get('*', function (req, res, next) {
    res.sendFile('dist/index.html', { root: __dirname });
 });

its creating issue with get db calls and returning index.html
3
Shoaib Qureshi

für eckige 5-Schnellkorrektur bearbeiten Sie app.module.ts und fügen nach den appRoutes {useHash:true} hinzu.

@NgModule(
{
  imports:[RouterModule.forRoot(appRoutes,{useHash:true})]
})
3
Adesh Shah

Für diejenigen, die im IIS durch das Leben kämpfen müssen: Verwenden Sie den folgenden PowerShell-Code, um dieses Problem basierend auf den offiziellen Angular 2-Dokumenten zu beheben (die in diesem Thread veröffentlicht wurden? Http://blog.angular-university.io/angular2 -router /

Import-WebAdministration
# Grab the 404 handler and update it to redirect to index.html.
$redirect = Get-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS 
$redirect.path = "/index.html"
$redirect.responseMode = 1
# shove the updated config back into IIS
Set-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS -value $redirect

Dadurch wird der 404 gemäß dem Vorschlag in den Angular 2-Dokumenten (Link oben) zur Datei /index.html umgeleitet.

2
Jim Hume

Sie können es unten ausprobieren. Für mich geht das!

hauptkomponente.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

...
export class MainComponent implements OnInit {
    constructor(private router: Router) {
        let path: string = window.location.hash;
        if (path && path.length > 0) {
            this.router.navigate([path.substr(2)]);
        }
    }

    public ngOnInit() { }
}

Sie können path.substr (2) weiter verbessern, um es in Router-Parameter aufzuteilen. Ich verwende Winkel 2.4.9

2
kaifeong

Ich wollte den URL-Pfad von Unterseiten im HTML5-Modus ohne Umleitung auf den Index beibehalten, und keine der Lösungen hat mir erklärt, wie das geht, also habe ich es so gemacht:

Erstellen Sie in IIS einfache virtuelle Verzeichnisse 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 doppelte Fehler angezeigt, wenn Sie Web.config ein zweites Mal mit dem virtuellen Verzeichnis laden:

<configuration>
    <location path="." inheritInChildApplications="false">
    <system.webServer>
        <defaultDocument enabled="true">
            <files>
                <add value="index.html" />
            </files>
        </defaultDocument>
    </system.webServer>
  </location>
</configuration>
1
Devin McQueeney

Ich denke, Sie erhalten 404, weil Sie http: // localhost/route anfordern, das auf dem Tomcat-Server nicht vorhanden ist. Da Angular 2 standardmäßig HTML-5-Routing anstelle von Hashes am Ende der URL verwendet, sieht die Aktualisierung der Seite wie eine Anforderung für eine andere Ressource aus.

Bei der Verwendung von Winkelrouting unter Tomcat müssen Sie sicherstellen, dass Ihr Server alle Routen Ihrer App dem Hauptindex index.html zuordnet, während Sie die Seite aktualisieren. Es gibt mehrere Möglichkeiten, dieses Problem zu beheben. Was auch immer Ihnen gefällt, Sie können das tun.

1) Fügen Sie den Code in web.xml Ihres Implementierungsordners ein:

<error-page>
     <error-code>404</error-code>
     <location>/index.html</location>
</error-page>

2) Sie können auch HashLocationStrategy mit # in der URL für Routen 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 unter Verwendung einer Konfiguration auf Serverebene neu, um zur index.html umzuleiten, wenn die Ressource nicht gefunden wird.

3.1) Erstellen Sie im META-INF-Ordner eine Datei context.xml und kopieren Sie den darunter liegenden Kontext.

<? xml version='1.0' encoding='utf-8'?>
<Context>
  <Valve className="org.Apache.catalina.valves.rewrite.RewriteValve" />
</Context>

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 für das Umschreiben von URLs verwendet). Kopieren Sie in rewrite.config den folgenden Inhalt:

  RewriteCond %{SERVLET_PATH} !-f
  RewriteRule ^/(.*)$ /index.html [L]
1
karan khanna

Angular Apps sind ideale 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 Host-Seite (index.html) der Anwendung 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. Beispielsweise ist http://www.example.com/heroes/42 ein tiefer Link zu der Heldendetailseite, auf der der Held mit der ID: 42 angezeigt wird.

Es gibt kein Problem, wenn der Benutzer innerhalb eines laufenden Clients zu dieser URL navigiert. Der Angular-Router interpretiert die URL und leitet diese Seite und diesen Helden weiter.

Klicken Sie jedoch auf einen Link in einer E-Mail, geben Sie ihn in die Adressleiste des Browsers ein oder aktualisieren Sie den Browser nur auf der Detailseite des Helden - alle diese Aktionen werden vom Browser selbst außerhalb der laufenden Anwendung ausgeführt. Der Browser fordert eine direkte Anfrage an den Server für diese URL an, wobei der Router umgangen wird.

Ein statischer Server gibt index.html routinemäßig 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 aus, sofern er nicht dafür konfiguriert ist, stattdessen index.html zurückzugeben

Wenn dieses Problem in der Produktion aufgetreten ist, folgen Sie den Schritten.

1) Fügen Sie eine Web.Config-Datei im Ordner src Ihrer Winkelanwendung hinzu. Platzieren Sie den Code darunter.

<configuration>
<system.webServer>
<rewrite>
    <rules>
    <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
    </rule>
    </rules>
</rewrite>
</system.webServer>
</configuration>

2) Fügen Sie einen Verweis darauf in angle-cli.json hinzu. Fügen Sie in angle-cli.json die Datei Web.config wie folgt in den Asset-Block ein.

"assets": [
    "assets",
    "favicon.ico",
    "Web.config"
  ],

3) Jetzt können Sie die Lösung für die Produktion mithilfe von erstellen 

ng build --prod

Dadurch wird ein dist-Ordner erstellt. Die Dateien im dist-Ordner können in jedem Modus bereitgestellt werden.

1
Malatesh Patil

Ich habe in eckig 2 Samen überprüft, wie es funktioniert.

Sie können express-history-api-fallback verwenden, um eine automatische Weiterleitung durchzuführen, wenn eine Seite neu geladen wird.

Ich denke, es ist der eleganteste Weg, dieses Problem IMO zu lösen.

1
Julian FARHI

Wenn Sie PathLocationStrategy verwenden möchten: 

  • Wildfly-Konfiguration:
    • Erstellen Sie die Datei "underow-handlers.conf", die im WEB-INF platziert werden soll 
    • Inhalt: (schließen Sie Ihre Restendpunkte aus!)
      • regex ['(./ overview/?.? $)'] und nicht regex ['(./ Endpunkte.)'] -> ['/ index.html'] neu schreiben
      • regex ['(./ deployments /?.? $)'] und nicht Regex ['(./ Endpunkte.)'] -> ['/ index.html'] neu schreiben

Einseitige Anwendung mit Java EE/Wildfly: serverseitige Konfiguration

1
nkeymeulen

ich füge nur .htaccess in root hinzu.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    RewriteRule ^ ./index.html
</IfModule>

hier füge ich einfach Punkt '.' (übergeordnetes Verzeichnis) in /index.html zu ./index.html hinzu
Stellen Sie sicher, dass Ihre index.html-Datei im Basispfad der Hauptverzeichnispfad ist, und legen Sie ihn im Build des Projekts fest.

1
hadiya vipul

Wenn Sie Apache oder Nginx als Server verwenden, müssen Sie eine .htaccess-Datei erstellen

<IfModule mime_module>
      AddHandler application/x-httpd-ea-php72 .php .php7 .phtml
    </IfModule>
    # php -- END cPanel-generated handler, do not edit

    <IfModule mod_rewrite.c>
        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]
    </IfModule>

Die Antwort ist ziemlich knifflig. Wenn Sie einen einfachen alten Apache-Server (oder IIS) verwenden, tritt das Problem auf, weil die Angular-Seiten nicht wirklich vorhanden sind. Sie werden aus der Winkelroute "berechnet".

Es gibt mehrere Möglichkeiten, das Problem zu beheben. Eine davon ist die Verwendung von HashLocationStrategy , die von Angular angeboten wird. In der URL wird jedoch ein scharfes Zeichen hinzugefügt. Dies ist hauptsächlich für die Kompatibilität mit Angular 1 (ich gehe davon aus). Tatsache ist, dass der Teil nach dem Sharp 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, 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 (in meinem Beispiel "dist") haben, können Sie etwas Seltsames machen, aber am Ende einfach. Ich gehe davon aus, dass Sie Ihre Winkelseiten 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 Anwendungsverzeichnisses) müssen Sie ErrorDocument 404 /404.php hinzufügen.

Die 404.php wird mit dem folgenden Code beginnen:

<?php
$angular='/dist/';
if( substr($_SERVER['REQUEST_URI'], 0, strlen($angular)) == $angular ){
    $index = $_SERVER['DOCUMENT_ROOT'] . $angular . "index.html";
    http_response_code(200);
    include $index;
    die;
}

// NOT ANGULAR...
echo "<h1>Not found.</h1>"

dabei ist $angular der Wert, der in der HREF Ihres Winkels index.html gespeichert ist.

Das Prinzip ist recht einfach: Wenn Apache die Seite nicht findet, wird eine 404-Umleitung zum Skript PHP durchgeführt. Wir prüfen nur, ob sich die Seite innerhalb des Anwendungsverzeichnisses befindet. Wenn dies der Fall ist, laden wir einfach die index.html direkt (ohne Weiterleitung): Dies ist erforderlich, um die URL unverändert zu lassen. Wir ändern auch den HTTP-Code von 404 in 200 (besser für Crawler).

Was ist, wenn die Seite nicht in der Winkelanwendung vorhanden ist? Nun, wir verwenden den "catch all" des Winkelrouters (siehe Angular-Router-Dokumentation).

Diese Methode funktioniert mit einer eingebetteten Angular-Anwendung in einer Basis-Website (ich denke, dass dies in Zukunft der Fall sein wird).

ANMERKUNGEN:

  • Dasselbe mit dem mod_redirect (durch das Umschreiben der URLs) zu versuchen, ist überhaupt keine gute Lösung, da Dateien (wie Assets) wirklich geladen werden müssen.
  • Die Umleitung mit ErrorDocument 404 /dist/index.html funktioniert zwar, aber Apache reagiert immer noch mit einem 404-Fehlercode (der für Crawler schlecht ist).
0
William R

Ich habe dies behoben (mit Java/Spring-Backend), indem ich einen Handler hinzufügte, der mit allem übereinstimmt, was in meinen Angular-Routen definiert ist, und die index.html anstelle von 404 zurückschickt. Dadurch wird die Anwendung effektiv (erneut) gebootet und die richtige Seite geladen. Ich habe auch einen 404-Handler für alles, was davon nicht erfasst wird.

@Controller         ////don't use RestController or it will just send back the string "index.html"
public class Redirect {

    private static final Logger logger = LoggerFactory.getLogger(Redirect.class);

    @RequestMapping(value = {"comma", "sep", "list", "of", "routes"})
    public String redirectToIndex(HttpServletRequest request) {
        logger.warn("Redirect api called for URL {}. Sending index.html back instead. This will happen on a page refresh or reload when the page is on an Angular route", request.getRequestURL());
        return "/index.html";
    }
}
0
Lee Willis

Importe hinzufügen:

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

Und in NgModule Provider hinzufügen:

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

Im Hauptindex.html Datei der App ändern Sie die Basis-Href in ./index.html von /.

Wenn die App auf einem beliebigen Server bereitgestellt wird, erhält die Seite eine echte URL, auf die von jeder externen Anwendung aus zugegriffen werden kann.

0
Debargho24

Wenn Sie den nginx-Webserver für Ihre Angular-App verwenden, müssen Sie nur try_files $uri $uri/ /index.html; in den Serverblock der Datei nginx conf einfügen. Im Falle eines Ubuntu-Servers heißt diese Datei default.conf und befindet sich unter /etc/nginx/conf.d.

    /etc/nginx/conf.d # vi default.conf

        server {
            listen       80;
            server_name  localhost;

            #charset koi8-r;
            #access_log  /var/log/nginx/Host.access.log  main;

            location / {
                root   /usr/share/nginx/html;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }
        }
0
Rajesh

2017-Juli-11: Da dies verlinkt ist aus einer Frage, die dieses Problem hat, aber Angular 2 mit Electron verwendet, füge ich hier meine Lösung hinzu.

Alles, was ich tun musste, war, <base href="./"> aus meiner index.html zu entfernen, und Electron begann die Seite erneut erfolgreich zu laden. 

0
TimTheEnchanter

Dies ist kein permanenter Fix für das Problem, sondern eher eine Problemumgehung oder ein Hack.

Ich hatte das gleiche Problem, als ich meine Angular App auf gh-pages bereitstellte. Zuerst wurde ich mit 404-Nachrichten begrüßt, als ich meine Seiten auf gh-pages aktualisiert habe.

Als @ gunter darauf hingewiesen wurde, begann ich mit HashLocationStrategy, das mit Angular 2 geliefert wurde.

Aber das brachte seine eigenen Probleme mit dem # in der URL. Es war wirklich schlecht, dass die URL so aussah wie dieser https://rahulrsingh09.github.io/AngularConcepts/#/faq.

Ich begann mich über dieses Problem zu informieren und stieß auf einen Blog. Ich habe versucht, es auszuprobieren, und es hat funktioniert.

Hier ist, was ich in diesem Blog erwähnt habe.

Sie müssen zunächst eine 404.html-Datei zu Ihrem gh-pages Repo hinzufügen das enthält ein leeres HTML-Dokument darin - aber Ihr Dokument muss insgesamt mehr als 512 bytes (unten erklärt). Als nächstes setzen Sie die markup im 404-Element der 404.html-Seite:

<script>
  sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'"></meta>

Dieser Code setzt die versuchte URL für den Eingang auf eine Variable in der Standard sessionStorage-Objekt und leitet sofort zu Ihrem Seite index.html des Projekts mit einem Meta-Refresh-Tag. Wenn Sie eine Github Organization-Website, fügen Sie keinen Repo-Namen in den Inhalt ein Ersetzen Sie den Attributersatztext einfach: content = "0; URL = '/'"

Um die URL zu erfassen und wiederherzustellen, navigierte der Benutzer anfangs Dazu müssen Sie dem Kopf Ihres .__ das folgende Skript-Tag hinzufügen. index.html vor allen anderen JavaScript-Aktionen auf der aktuellen Seite der Seite Zustand:

<script>
  (function(){
    var redirect = sessionStorage.redirect;
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      history.replaceState(null, null, redirect);
    }
  })();
</script>

Dieses JavaScript-Bit ruft die in sessionStorage .__ zwischengespeicherte URL ab. auf der Seite 404.html vorbei und ersetzt den aktuellen Verlaufseintrag durch es.

Referenz backalleycoder Vielen Dank an @Daniel für diesen Workaround.

Nun ändert sich die obige URL in https://rahulrsingh09.github.io/AngularConcepts/faq

0
Rahul Singh

Durch Hinzufügen von .htaccess in root wurde 404 aufgelöst, während die Seite in Winkel 4 Apache2 aktualisiert wurde.

<IfModule mod_rewrite.c>
    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]
</IfModule>
0
a_k_v

Die beste Lösung für das Auflösen des "Routers, der nicht beim erneuten Laden des Browsers funktioniert" ist, dass wir Spa-Fallback verwenden sollten. Wenn Sie die angle2-Anwendung mit asp.net core verwenden, müssen Sie sie auf der "StartUp.cs" -Seite definieren. unter MVC-Router. Ich füge den Code bei.

 app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
            routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
        });

Dies ist nicht die richtige Antwort, aber beim Aktualisieren können Sie alle toten Anrufe zur Homepage umleiten, indem Sie die 404-Seite opfern. Es handelt sich hierbei um einen temporären Hack, der nur auf 404.html-Dateien folgt

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.location.href = "http://" + document.location.Host;
        </script>
    </head>
</html>
0
user6250141