Angular JS Angular 18 hybrid routing

I have an angular js/angular 18 hybrid application which is working, but what I am trying to do is migrate the routes of the customer users like this:

.state('customer', {
url: "/customer",
abstract: true,
template: "<app-side-menu></app-side-menu>",
data: {
role: 2
}
})


And this is how I have the routes defined in the app side menu component:

import { Routes } from '@angular/router';
import { SideMenuComponent } from './customer/side-menu/side-menu.component';
import { HomeComponent } from './customer/home/home.component';

export const customerRoutes: Routes = [
{
path: 'customer',
component: SideMenuComponent,
children: [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' }
]
}
];


And this is how I defined the app side menu component:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterModule } from '@angular/router';
//header
import { HeaderComponent } from '../../layout/header/header.component';
// menu
import { MenuComponent } from '../../layout/menu/menu.component';
// footer
import { FooterComponent } from '../../layout/footer/footer.component';
import { CustomerRoutingModule } from './customer.routing.module';



@Component({
selector: 'app-side-menu',
standalone: true,
imports: [HeaderComponent, MenuComponent, FooterComponent, MatSidenavModule, RouterModule, CustomerRoutingModule, CommonModule],
templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.less'
})
export class SideMenuComponent {
open: boolean = false;
}


But the problem is that no routes are being rendered for the customer, for example, if i navigate to customer/home, the home component should be rendered but it isn't.

Continue reading...