CODEWITHSUNDEEP
angularrouterlink
Zorian
Zorian

Reputation: 23

Angular 5 routerLink doesn't work correctly

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.

Upvotes: 1

Views: 2524

Answers (1)

Smokey Dawson
Smokey Dawson

Reputation: 9230

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>

Upvotes: 5

Related Questions