Routing behavior not working as expected

Question

I have the following routes variable defined in my app-routing.module.ts:

const routes: Routes = 
[
  { path: '', redirectTo: '/users', pathMatch: 'full' }, 
  { path: 'users',  component: UsersComponent },
  { path: 'dashboard',  component: DashboardComponent }
];

With this current configuration, when I submit http://localhost:3000/users, the browser redirects to http://localhost:3000/users/users and then displays the user list binding in the html as expected.

However, something seems off kilter for the browser to redirect from /users to /users/users. If I remove the th first route config with the redirectTo attribute then the browser stays on /users without redirecting to /users/users. However, in this scenario, the user list binding doesn't display as expected.

Any idea what might be causing the redirect to /users/users? Any idea how I can keep the browser on /users and get the user list binding to properly display at this uri?

Which version of Angular2 are you on? And which version of the router? — Jesse Kernaghan, Nov 07 '16 at 20:04
I can't see anything wrong with your code at first glance, are you importing using `imports: [RouterModule.forRoot(routes)],`? — Jesse Kernaghan, Nov 07 '16 at 20:20
yes: @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {} — user7117607, Nov 07 '16 at 21:52
The only other thing I can think of is that you haven't set your base href. The docs suggest adding something like `` into your index.html file but I found that there were too many side-effects to that approach. I prefer to import `APP_BASE_HREF` from '@angular/common' and pass this as a provider in your `app.module.ts`: `providers: [{provide: APP_BASE_HREF, useValue : '/' } ... ]` — Jesse Kernaghan, Nov 07 '16 at 22:00
Another interesting piece of information is that a similar pattern occurs with each route that I attempt. I'm building this app off of the angular.io tour of heroes app so I have a route defined for /heroes and /dashboard. http://localhost:3000/dashboard redirects to http://localhost:3000/dashboard/users and displays a list of user info on the page. Same weird behavior with http://localhost:3000/heroes. — user7117607, Nov 07 '16 at 22:10
Another interesting piece of information is that whatever is included in this config item determines the final redirect: { path: '', redirectTo: '/heroes', pathMatch: 'full' }. This config item had pointed to /users in my original post. I changed default path to '/heroes' as shown in the code above and now all routes get appended with '/heroes' at the end and the browser subsequently redirects to '/heroes' — user7117607, Nov 07 '16 at 22:23
That points towards not having the base href setup, see my comment above. Is something like that implemented in your code? — Jesse Kernaghan, Nov 07 '16 at 22:23
Thanks Jesse. That was the problem. I had copied over index.html from the toh app so I had assumed that it was configured correctly and the page did include special code to set base href: . However, the was not setting base href = "/" hence the failure. — user7117607, Nov 07 '16 at 22:30
Perfect, glad you got it resolved! added a formal answer for posterity in case someone else faces the same issue ( with a bit of a longer explanation of the alternative to setting the html tag ). — Jesse Kernaghan, Nov 07 '16 at 23:03

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Option 1: Setting base tag

In order to get the router working properly a base href needs to be defined somehow for the app. The docs recommend adding a base element to the head of your index.html file, such as:

<base href="/">

Option 2: Setting a provider

This can be a bit dangerous however as it has (potentially unexpected) side effects on anchor tags, empty href tags, etc, etc. It also breaks inline svg sprites... which was a major part of our app's UI. If you want to make the router work but not break a lot of things you can actually define the base href elsewhere, like so:

// ... other imports
import { APP_BASE_HREF } from '@angular/common';

@NgModule({
    
    // ... other pieces of ngModule
    
    providers: [
        {provide: APP_BASE_HREF, useValue : '/' }
    ],
    
    // ... other pieces of ngModule
})
export class AppModule {
    constructor() {}
}

As a basic example. It's a bit hard to find in the documentation but is a good workaround to get things going without messing with everything else.

Routing behavior not working as expected

1 Answers1

Option 1: Setting base tag

Option 2: Setting a provider