Javascript redirects to the wrong URL

Question

I'm using angularjs and I have a very basic app...

let app = angular.module('GHoF', [
  'ngRoute'
]);

app.config(function Config($routeProvider) {

  // Routes

  console.log($routeProvider);
  $routeProvider
    .when('/applications', {
      templateUrl: 'app/pages/myApplications/myApplications.html',
      controller: 'MyApplicationsCtrl'
    })
    .otherwise({
      redirectTo: 'app/pages/auth.html'
     })

});

HTML

<html lang="en" ng-app="GHoF">
<head>
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="app/app.js"></script>
    <title>Home</title>
</head>
<body>
    <main ng-view></main>
</body>

The problem is that it's redirecting me to the wrong URL.

http://127.0.0.1:8080/#!/app/pages/auth.html

I don't know why but it appears /#! in the URL. This is a very basic app...

What do you mean? I didn't configure anything else beside what I have — user12361681, Mar 10 '20 at 16:46
https://stackoverflow.com/questions/26549724/angularjs-how-to-turn-off-hashbang-mode — epascarello, Mar 10 '20 at 16:46

Shaun E. Tobias · Answer 1 · 2020-03-10T17:08:55.240

0

You need to enable HTML5Mode to get rid of the hashbangs. First you need to add the base href in your index file (I usually put this directly under the opening <head> tag):

<base href="/">

Then in your config, you should enable it via the $locationProvider:

app.config(function Config($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/applications', {
      templateUrl: '/app/pages/myApplications/myApplications.html',
      controller: 'MyApplicationsCtrl'
    })
    .otherwise({
      redirectTo: '/app/pages/auth.html'
    })
});

Don't forget you will want to handle server rewrites if you plan on going directly to those routes in HTML5 mode.

This is a good resource for information on how to do that for different servers: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

edited Mar 10 '20 at 17:08

answered Mar 10 '20 at 16:49

Shaun E. Tobias

527
3
13

it works but it's not redirecting now... – user12361681 Mar 10 '20 at 16:51
I think `redirectTo: 'app/pages/auth.html'` needs a leading slash to redirect from the root. Try `redirectTo: '/app/pages/auth.html'` or even `redirectTo: '/pages/auth.html'` if /app is already your root – Shaun E. Tobias Mar 10 '20 at 16:53
it doesn't redirect... I go to `http://127.0.0.1:8080/applications` and says `Cannot GET /applications` – user12361681 Mar 10 '20 at 16:58
If you're going directly to that URL, you need to add rewrites to your server. See: https://riptutorial.com/angularjs/example/21798/things-to-do-when-using-html5mode – Shaun E. Tobias Mar 10 '20 at 17:05
@user12361681I updated my answer with a better link in case you're not using apache – Shaun E. Tobias Mar 10 '20 at 17:10

Javascript redirects to the wrong URL

1 Answers1