angularjs routeprovider, html5mode et htaccess ne fonctionnent pas

J’ai une seule application de page avec un routeur et html5mode activé dans

/account/ ->index.html 

Le routeur ressemble à ceci:

 app.config(function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when('/account', { templateUrl: 'account/views/welcome.html', }) //works .when('/account/emails', { templateUrl: 'account/views/email.html', controller: 'emailController' }) //404 error .when('/account/wallet', { templateUrl: 'account/views/wallet.html', }) //404 error .when('/account/settings', { templateUrl: 'account/views/settings.html', controller: 'settingsController' }) //404 error .when('/account/logout', { templateUrl: 'account/views/logout.html', }) //404 error }); 

Maintenant, j’ai aussi un fichier .htaccess dans

 /account/ ->.htaccess 

Le htaccess ressemble à ceci:

 RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html 

Comme prévu, lorsque je vais sur //localhost/account/index.html ou // localhost / account / l’URL est gérée correctement. Le fait de cliquer sur la navigation fonctionne également correctement. Cependant, si j’essaie d’actualiser la page sur l’un des liens routés ou si j’essaie d’y accéder directement depuis la barre d’adresse, j’obtiens la page par défaut Apache2 Ubuntu .

Je ne suis pas sûr de ce que je fais mal ici car cela semble assez simple?

De plus, si je change RewriteRule ^ /index.html en RewriteRule ^ /account/index.html au lieu d’obtenir la page Apache par défaut, je reçois un 404:

 Not Found The requested URL /account/index.html was not found on this server. 

J’ai eu un problème similaire il y a un certain temps, et il y a quelques pièces à vérifier.

index.html

Dans votre fichier index.html cliquez sur , vérifiez que vous avez défini la base href:

   ...  

.htaccess

Votre fichier .htaccess ressemble essentiellement à ce à quoi le mien ressemblait lorsque je l’ai écrit. Voici ce que j’ai utilisé (la réécriture est probablement négligée, mais cela a fonctionné pour moi!):

 # Enable URL rewriting/redirecting RewriteEngine On RewriteBase / # if requested filename is not a file that exists RewriteCond %{REQUEST_FILENAME} !-f # AND if requested filename is not a directory that exists RewriteCond %{REQUEST_FILENAME} !-d # THEN rewrite the URL to be /#/PREVIOUS_URL RewriteRule ^(.*)$ /#/$1 [L] 

AngularJS Router Config

Le html5Mode est html5Mode défini sur true, comme indiqué dans votre code:

 app.config(function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); ... }); 

On dirait qu’Apache est en train de ronger le # dans l’URL que l’angular utilise pour ses routes. Vous avez besoin de quelque chose comme ceci:

 RewriteEngine on # If an existing asset or directory is requested go to it as it is RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] # If the requested resource doesn't exist, use index.html RewriteRule ^(.*) /index.html [NC,L] 

Cela va le faire sauter les fichiers et se diriger vers index.html quand angular demande un fichier.

Il s’avère que cela a résolu le problème

  RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.html