Removing #! from routes Angular 1.6. Browser breaks on refresh

Question

I'm new to Angular but this has been a bit of an issue.

So if I visit localhost:9000 I am greeted with the index view. If I click on my navbar link to the /about link, I am taken to http://localhost:9000/about and I am greeted with the about view.

However, if I refresh that page when I'm on the /about route. It breaks and tells me: Cannot GET /about If I go back to index it begins to work again. If I refresh on the index it doesn't break.

I set $locationProvider.html5Mode(true); as well as add <base href="/"> to the head of my index.html file.

Here is the relevant information from my files. (also I'm using Chrome)

app.js

    myApp = angular.module('myApp', ['ngRoute']);

    myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

        $routeProvider

        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'mainController'
        })

        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'aboutController'

        })

        $locationProvider.html5Mode(true);

    }]);

    myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
        $log.info($location.path());

    }]);

    myApp.controller('aboutController', ['$scope', function($scope) {

    }]);

index.html

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
  <head>
    <title>myapp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
    <script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>

    <script src="/scripts/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <base href="/">
  </head>
  <body>

      <!-- Removed non relevant bootstrap nav bar stuff -->
      <ul class="nav navbar-nav">
        <li><a href="/about">About</a></li>
      </ul>


      <div class="container">
        <div ng-view></div>
      </div>


 </body>

This is a server issue; your server has to return the `index.html` on unknown routes. Which server are you using? — Claies, Jan 31 '17 at 22:28
Possible duplicate of [Reloading the page gives wrong GET request with AngularJS HTML5 mode](http://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode) — Phil, Jan 31 '17 at 22:35
@Claies I used yeoman to scaffold an Angular app with using Grunt. Granted I don't know much about how it's set up but I changed the app name inside of bower.json and changed the Angular version to ^1.6.0 and my app name and re-`bower install`. Other than that I've left everything alone aside from index and app.js page. — Antonio, Jan 31 '17 at 22:36
See http://stackoverflow.com/documentation/angularjs/3208/angularjs-gotchas-and-traps/21798/things-to-do-when-using-html5mode#t=201701312237027031438, point #4 — Phil, Jan 31 '17 at 22:37
Possible duplicate of [angularjs 1.6.0 (latest now) routes not working](http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) — georgeawg, Feb 01 '17 at 07:32
@georgeawg nope, totally different issue (though a very good one to point out). This one is using HTML5 mode — Phil, Feb 01 '17 at 23:59

score 0 · Answer 1 · answered Mar 10 '17 at 13:34

use href="#!/about/" in html because it is changed in angularjs.1.6 href="#/about" not work for it

use below HTML code

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
  <head>
  <title>myapp</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>

  <script src="/scripts/app.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <base href="#!/">
  </head>
  <body>

  <!-- Removed non relevant bootstrap nav bar stuff -->
  <ul class="nav navbar-nav">
  <li><a href="#!/about">About</a></li>
  </ul>


  <div class="container">
  <div ng-view></div>
  </div>


 </body>

Removing #! from routes Angular 1.6. Browser breaks on refresh

app.js

index.html

1 Answers1