Angular JS Angular 18 hybrid routing

Question

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' }
    ]
  }
];

This is the HTML of the component:

<mat-sidenav-container>
    <mat-sidenav mode="side" [(opened)]="open">
      <!-- Aquí se muestra el menú -->
      <app-menu></app-menu>
    </mat-sidenav>
    <mat-sidenav-content>
      <app-header></app-header>
      <section id="content" [ngClass]="{'col-100': open, 'section': !open}">
        <router-outlet></router-outlet> <!-- Angular Router gestionará las rutas hijas -->
      </section>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>

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.

flauslord · Accepted Answer · 2025-03-05 14:41:42Z

0

Try to add <router-outlet><router-outlet/> to your side-menu.component.html. RouterOutlet serves as a placeholder for the component based off your router state. In your case, after entering url ...customer/home the HomeComponent should be rendered.

answered Mar 5 at 14:41

flauslord

277 bronze badges

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

1 Comment

Some d Mar 5 at 15:02

I forgot to add the html of the component, the router-outlet element was already there.

flauslord · Accepted Answer · 2025-03-07 18:35:52Z

The issue could be in the providers array of the AppConfig object passed to the bootstrapApplication method.

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter([
      {
        path: 'customer',
        children: [
          { path: 'home', component: HomeComponent },
          { path: '', redirectTo: 'home', pathMatch: 'full' },
        ],
      },
    ]),
  ],
}).catch((err) => console.error(err));

I tried to simulate your issue on Stackblitz — if you add /customer/home to the URL in StackBlitz's built-in browser, the HomeComponent will be displayed. I deleted path of the customer, since you are using abstract: true in your AngularJS application.

If you are using ngModules use something like this to define your routes:

const routes: Routes = [
...
  { path: 'customer', loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule) }, // Lazy loading modulu
...
];

And define your routes in customer-routing.module.ts file.

Collectives™ on Stack Overflow

Angular JS Angular 18 hybrid routing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related