angularjs 1.6.0 (latest now) routes not working

Asked 18/12, 2016 at 19:9 Answered 29/4, 2019 at 12:25

Solved angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6

102

I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.

I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.

I have this piece of html in my index.html file:

<html>
<head ng-app="myApp"> 
    <title>New project</title>
    <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <a href="#/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
</html>

and here is my app.js:

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


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/add-quote', {
            templateUrl: 'views/add_quote.html',
            controller: 'QuoteCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);

Now when I just visit the page, here is what I get in the url:

http://localhost:8000/admin#!/

and when I click on the Add quote button, I get this:

http://localhost:8000/admin#!/#%2Fadd-quote

What can be the problem here? Thanks for help

Antedate answered 18/12, 2016 at 19:9 Comment(1)

possibly related? github.com/angular/angular.js/commit/… – Devastate 18/12, 2016 at 19:50

174

Simply use hashbang #! in the href:

 <a href="#!/add-quote">Add Quote</a>

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

For more information, see

Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — @MiloTheGreat

The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715

I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.

— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

Exempt answered 18/12, 2016 at 21:21 Comment(2)

Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. – Apocalypse 11/3, 2017 at 7:56

@Apocalypse feel free to leave your feedback with the AngularJS Team -- github.com/angular/angular.js/issues/15715 – Exempt 11/3, 2017 at 8:22

Simply include the ! into the href:

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>

Stellastellar answered 23/4, 2017 at 13:1 Comment(3)

Wow wasted hours following deprecated tutorials on routing .. all I was missing was the '!'. Thank you! – Dibranchiate 12/5, 2017 at 12:17

With all of the jumpo mumpo about hashes and hashbang I never thought that "!" seems like an illegal character that appears without reference. And if I just accept it and acknowledge it's existence the problem would have been solved. – Brittenybrittingham 19/6, 2017 at 14:56

Me too... this was driving me crazy! – Unmannerly 14/9, 2017 at 12:55

I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"

If sticking to an older version of angular is an option for you then consider it since it may save your nerves...

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
    templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
    templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
    templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
    templateUrl : "views/groups.html"
})
.when("/transformations", {
    templateUrl : "views/transformations.html"
})
.when("/effects", {
    templateUrl : "views/effects.html"
})
.when("/", {
    templateUrl : "views/basic-shapes.html"
});
});

Daft answered 18/4, 2017 at 6:55 Comment(1)

How does staying on 1.5 affect upgrading to Angular 2/3/4/5/etc? Does ngUpgrade work from 1.5 to 2+? I'm kinda feeling ngUpgrade may not be viable for us. (yeah this comment will mostly be unseen and howling into the wind) – Sodden 8/2, 2018 at 15:8

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);

Avelar answered 21/3, 2018 at 7:26 Comment(0)

Try this one might Help...

In html or view Page

 <body>
       <a href="#/Home.html">Home</a>
       <div ng-view></div>
 </body>

In Script Page

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });

Diella answered 29/4, 2019 at 12:25 Comment(0)

Recommended topics

Hot tags