Javascript redirects to the wrong URL

181 Views Asked by user12361681 At 10 March 2020 at 16:44

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...

Original Q&A

There are 1 best solutions below

Shaun E. Tobias On 10 March 2020 at 16:49

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

Javascript redirects to the wrong URL

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in NGROUTE

Trending Questions

Popular # Hahtags

Popular Questions