web-dev-qa-db-fra.com

angularjs html5mode actualiser la page pour obtenir 404

J'ai créé une application utilisant AngularJS avec GAE (Google App Engine - Java).

Je veux le convertir compatible avec le référencement.

index.html

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

et le corps est chargé dynamiquement via <div ui-view></div>.

app.js

$locationProvider.html5Mode(true);

L'URL fonctionne bien, mais lorsque j'actualise la page, l'erreur 404 s'affiche.

Avez-vous une idée de ce que cela provoque?

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

Je suis sûr que vous avez déjà résolu ce problème, mais pour quiconque se heurte à ce problème:

La fonction $locationProvider.html5mode(true) de AngularJS utilise essentiellement la fonction history.pushState() de HTML5, qui modifie artificiellement l'historique et l'URL de la barre d'adresse de l'utilisateur sans recharger la page. Si vous créez une route (en angulaire) pour /about, mais que vous ne disposez d'aucune route correspondante sur le serveur, vous rencontrerez le problème suivant: le rechargement de la page révèle le fait qu'elle ne se trouve pas sur le serveur. La solution la plus simple consiste à mettre en miroir votre point d'entrée pour votre application (/index.html??) Pour tous les itinéraires accessibles par votre application.

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

20
Michael Tang

Il devrait être utile, doc officiel angulaire; https://github.com/angular-ui/ui-router/wiki/Frequent-Asked-Questions#how-to-configure-your-server-to- travailler avec html5mode

Je vais quand même coller la partie pertinente ici, mais je vous conseillerais de consulter le document.

Apache Rewrites

NomServeur my-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 réécrit

server {
server_name my-app;

index index.html;

root /path/to/app;

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

Azure IIS réécrit

<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

Essayez d’ajouter la section ci-dessous dans la section relative au middleware liverload du fichier grunt.

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

Cela faisait longtemps que les gens ne cherchaient pas cette réponse, mais j'en avais besoin aujourd'hui. J'ai créé un exemple de travail avec GAE, angularJS et ng-Route qui contient de jolis liens formatés. 

Voici le lien vers l'exemple de GitHub

0
Igor Rendulic

Pour l'application Java exécutée sur GAE, vous pouvez utiliser 

Filtre de réécriture d'URL

Vous trouverez un fichier XML nommé urlrewrite.xml. Mettez toutes vos routes dans ce fichier xml et configurez-le de manière à recevoir une demande comme celle-ci:

  • / location/edit/120211

il sera redirigé vers

  • #/location/edit/120211

et votre application aura le temps d'être initialisée et de déclencher le routage

0
Gokhan Demirtas

pour moi, le correctif de la ligne suivante comme première ligne de la balise de votre page d'index (principale):

<base href="/">

De plus, vous devez configurer la règle de réécriture IIS comme suit: (assurez-vous d’avoir préalablement installé l’extension de réécriture de iis)

 <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