Angular 5 routerLink doesn't work correctly

Question

There are one module which contains all components and one route module.

The routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { AdminDishesComponent } from './admin/adminDishes/adminDishes.component';
import { AdminCategoriesComponent } from './admin/adminCategories/adminCategories.component';

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'user'
  },
  {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      {
        path: 'dishes',
        component: AdminDishesComponent
      },
      {
        path: 'categories',
        component: AdminCategoriesComponent
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [],
  exports: [
    RouterModule
  ]
})

export class RoutingModule { }

The root component:

<a routerLink="/admin">Admin control panel</a>
<router-outlet></router-outlet>

The admin component:

<ul id="leftMenu">
  <li><a routerLink="/dishes">Dishes</a></li>
  <li><a routerLink="/categories">Categories</a></li>
</ul>
<div id="adminContent">
  <router-outlet></router-outlet>
</div>

Please

The links need to be like:

http://localhost:4200/admin/categories

But Angular give me in the link:

http://localhost:4200/categories

If I enter the adress that I need myself in address bar everything is working.

I'd recommend running through angular.io/guide/router, particularly on absolute vs. relative links — jonrsharpe
– jonrsharpe, Commented Mar 20, 2018 at 22:47

Smokey Dawson · Accepted Answer · 2018-03-20 23:49:02Z

5

So this is a simple mistake..

There a two types of paths in angular relative paths and absolute paths

so an absolute path looks like this /admin/categories notice the / at the beginning that means it will start the path from the root path which is specified in your index.html as <base href="/">

now a relative path categories will just add that to the path you are currently on so if you on http://localhost:4200/admin and you click on a routerLink with categories you will go to http://localhost:4200/admin/categories which is what you are trying to achieve here.

so just remove the / like so... <a routerLink="dishes">dishes</a>

or if you like you could use an absolute path.. <a routerLink="/admin/dishes">dishes</a>

edited Mar 20, 2018 at 23:49

answered Mar 20, 2018 at 23:31

Smokey Dawson

9,29023 gold badges87 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zorian Over a year ago

I understood. Thank you!

Collectives™ on Stack Overflow

Angular 5 routerLink doesn't work correctly

Please

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Please

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related