Angular routing for admin panel

Question

I am trying to make an e-commerce admin panel in Angular. I created a layout for the dashboard, header, and side navigation that is working perfectly fine. The components listed on the side nav are displayed correctly on the blank dashboard area but any page inside the component of side navigation, e.g., component 'add-color-stone' inside 'color-stone' components this the url for color-stone component: http://localhost:4200/general-master/color-stone/

I am expecting the add-color-stone page to open within the blank dashboard area like for now it goes like http://localhost:4200/add-color-stone rather than http://localhost:4200/general-master/color-stone/add-color-stone

folder structure

src
 |->app
     |-layouts
          |-blank
          |-full
              |-header
              |-sidenavigation
     |->pages
          |->general-master
                 |->color-stone
                           |->add-color-stone

color-stone.component.html

<div class="row ">
    <div class="col-md-12">
        <h3>Color Stone</h3>
        <button class="add-product-button" (click)="navigateToAddColorStone()">Add Product</button>
    </div>
</div>

color-stone.component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-color-stone',
  templateUrl: './color-stone.component.html',
  styleUrls: ['./color-stone.component.scss']
})
export class ColorStoneComponent {

  constructor(private router: Router) {}

    navigateToAddColorStone() {
        this.router.navigate(['../add-color-stone']);
    }

}

color-stone.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../../material.module';

// icons
import { TablerIconsModule } from 'angular-tabler-icons';
import * as TablerIcons from 'angular-tabler-icons/icons';


import { MatNativeDateModule } from '@angular/material/core';
import { ColorStoneRoutes } from './color-stone.routing';
import { AddColorStoneComponent } from './add-color-stone/add-color-stone.component';



// genral master


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ColorStoneRoutes),
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    TablerIconsModule.pick(TablerIcons),
    MatNativeDateModule,
  ],
  declarations: [
 AddColorStoneComponent,
   
  ],
})
export class ColorStoneModule {}

general-master.routing.ts

import { Routes } from '@angular/router';
import { ColorStoneComponent } from './color-stone/color-stone.component';
   
// general master



export const GeneralMasterRoutes: Routes = [
  {
    path: '',
    children: [
      
      {
        path: 'color-stone',
        component: ColorStoneComponent,
      },
     
    ],
  },
];

Answer 1

To make the "add-color-stone" page open within the "color-stone" component, you should define nested routes

export const ColorStoneRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: '', // This will match /general-master/color-stone
        component: ColorStoneComponent,
      },
      {
        path: 'add-color-stone', // This will match /general-master/color-stone/add-color-stone
        component: AddColorStoneComponent,
      },
    ],
  },
];