wake-up-neo.com

angularJS HTML5Mode Refresh-Seite erhalten 404

Ich habe eine App mit AngularJS und GAE (Google App Engine - Java) erstellt.

Ich möchte es mit SEO kompatibel konvertieren.

index.html

  • <meta name="fragment" content="!" />
  • <base href="/">

und der Körper wird dynamisch durch <div ui-view></div> geladen.

app.js

$locationProvider.html5Mode(true);

Die URL funktioniert einwandfrei, aber wenn ich die Seite aktualisiere, erhalte ich den Fehler 404.

Hast du eine Ahnung, was das bewirkt?

google-app-engineangularjshttp-status-code-404
17
user2625111

Ich bin sicher, dass Sie das bereits gelöst haben, aber für alle anderen, die sich mit diesem Problem beschäftigen:

Die $locationProvider.html5mode(true) von AngularJS verwendet im Wesentlichen die history.pushState() von HTML5, die den Verlauf des Benutzers und die Adressleisten-URL künstlich ändert, ohne die Seite neu zu laden. Wenn Sie eine Route (in Angular) für /about erstellen, aber keine übereinstimmende Route auf dem Server haben, werden Sie auf das Problem stoßen, bei dem das Neuladen der Seite die Tatsache aufdeckt, dass sie nicht auf dem Server vorhanden ist. Die einfachste Lösung besteht darin, Ihren Einstiegspunkt für Ihre App (/index.html?) Für alle Routen zu spiegeln, auf die Sie mit Ihrer App zugreifen können.

Siehe: https://stackoverflow.com/a/16570533/1500501

20
Michael Tang

Es sollte hilfreich sein, offizielles Winkeldokument; https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to- work-with-html5mode

Ich füge immer noch den relevanten Teil hier ein, aber ich würde empfehlen, das Dokument anzuschauen.

Apache Rewrites

ServerName meine-App

DocumentRoot /path/to/app

<Directory /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]
</Directory>

Nginx-Umschreibungen

server {
server_name my-app;

index index.html;

root /path/to/app;

location / {
    try_files $uri $uri/ /index.html;
}
}

Azure IIS schreibt um

<system.webServer>
 <rewrite>
  <rules> 
    <rule name="Main Rule" 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>

6
code_ada

Fügen Sie unten in Ihrem Abschnitt über Ihre Middleware-Datei zum Laden von Dateien zum Laden von Dateien hinzu.

livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect().use(
                '/apply',
                connect.static('./app/index.html')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      }  
   }
1
Ramya Ramachandran

Es ist eine Weile her, seit die Leute nach dieser Antwort gesucht haben, aber ich brauchte sie heute. Ich habe ein funktionierendes Beispiel mit GAE, angleJS und ng-Route gemacht, das ziemlich formatierte Links hat. 

Hier ist der Link zum GitHub-Beispiel

0
Igor Rendulic

Für die Java-App, die unter GAE ausgeführt wird, können Sie verwenden 

URL-Umschreibfilter

Sie finden eine XML-Datei mit dem Namen urlrewrite.xml. Legen Sie alle Ihre Routen in diese XML-Datei ein und konfigurieren Sie sie so, dass Sie eine Anforderung erhalten, beispielsweise:

  • / location/edit/120211

es wird zu weitergeleitet

  • #/location/edit/120211

und Ihre App hat Zeit, bootst zu werden und das Routing auszulösen

0
Gokhan Demirtas

für mich ist der Fix auf die folgende Zeile als erste Zeile innerhalb des Tags Ihrer Indexseite (Hauptseite):

<base href="/">

Außerdem müssen Sie die Umschreibregel IIS wie folgt konfigurieren: (Stellen Sie sicher, dass Sie zuerst die Umschreibungserweiterung iis installieren)

 <system.webServer>
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <add input="{REQUEST_URI}" pattern="(api)" negate="true" />
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>
    <caching enabled="false" enableKernelCache="false" />

0
asalhani