AngularJS: Seite neu laden schlägt fehl, wenn Angular Ui Router mit Html5-Modus aktiviert

Question

Ich benutze Angular UI Router in meiner eckigen App und ich habe HTML5-Modus zum Entfernen # Form meiner URLs mit $ LocationProvider in der Konfig.

angular.module('myApp', ['ui.router']) 
.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state('home', { 
      url: '/', 
      templateUrl: 'views/home.html', 
      controller:'HomeController' 
     }) 
     .state('about', { 
      url: '/about', 
      templateUrl: 'views/about.html', 
      controller:'' 
     }) 
     .state('skills', { 
      url: '/skills', 
      templateUrl: 'views/skills.html', 
      controller: '' 
     }) 
     .state('projects', { 
      url: '/projects', 
      templateUrl: 'views/projects.html', 
      controller: 'ProjectsController' 
     }) 
     .state('contact', { 
      url: '/contact', 
      templateUrl: 'views/contact.html', 
      controller: '' 
     }); 
    $locationProvider.html5Mode(true); 
}); 

Ich habe auch den auch

<base href="/"> 

-Tag in der index.html-Datei festgelegt. Das Routing funktioniert gut und ich kann zu den Seiten navigieren und # wird entfernt, aber wenn ich die Seite mit der Reload-Schaltfläche im Browser aktualisiere, erhalte ich eine 404-Fehlerseite.

Ich verwende Webstorm IDE für meine Entwicklung. Kann mir jemand eine Lösung dafür liefern?

Answer 1

Wenn Sie den HTML5-Modus aktivieren, wird Ihre URL-Hash-Nummer zu Hash-Nummer #! dann es gibt URL ohne Hashbang im Browser zurück. Also auch wenn die URL auf Browser so etwas wie

http://www.example.com/about 

die tatsächliche Hash-Bang-URL ist so etwas wie diese.

http://www.example.com/#!/about 

Versuchen Sie, Ihre Htaccess-Datei entsprechend geändert. sollte es öffentliches Verzeichnis sein, in dem sich Ihre index.html befindet, , wenn Sie Apache verwenden.

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