Angular Library Routing Not Working When Used Inside Angular 19 App

Question

I'm working on an Angular 19 app that uses a custom Angular library, and I'm having trouble getting the routing inside the library to work properly. The app is a legacy app and all the components are Non-Standalone

The main **app-routing**

    const routes: Routes = [
    {
        path: 'layout',
        component: Container,
        children: [
            { path: 'property/:id', component: PropertyContainerComponent},
            { path: 'portfolio/:id', component: PortfolioContainerComponent}
        ]
    }
]

inside PropertyContainerComponent & PortfolioContainerComponent

<lib-component [input]="data"></lib-component>

Library Routing - The library defines its own internal routes using RouterModule.forChild():

   const routes: Routes = [
      { path: 'projects', component: ProjectsComponent },
      { path: 'dashboard', component: DashboardComponent }
    ];
  
   @NgModule({
    declarations: [],
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]})

library module:

@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [ProjectsComponent, DashboardComponent],
})
export class LibModule {}

Library Component I am checking if the parent route property or portfolio and navigating accordingly

 if (property)
      this.router.navigate(['projects'], { relativeTo: this.route });
    if (portfolio)
      this.router.navigate(['dashboard'], { relativeTo: this.route });

The Issue - When I navigate to the library from the app:

layout/property/100/projects
layout/portfolio/100/dashboard

The URL forms correctly, but I get an error:

NG04002: Cannot match any routes. URL Segment: 'layout/property/100/projects'

What I’m Trying to Achieve

I want the library to handle its own internal routing (like /projects and /dashboard), mounted under a parent route in the app (e.g. layout/property/:id/...).

You have property/:id but you are routing to layout/property/projects why is there no ID? — Naren Murali
– Naren Murali, Commented Apr 17 at 7:22
@NarenMurali My bad. I missed the id while forming the queestion. Corrected now. — Kedar Marathe
– Kedar Marathe, Commented Apr 17 at 7:26

Naren Murali · Accepted Answer · 2025-04-17 09:48:06Z

1

You have to specify the child routes using the module (use loadChildren), we can use lazy loading as an additional enhancement.

const routes: Routes = [
{
    path: 'layout',
    component: Container,
    children: [
        {  
          path: 'property/:id',  
          component: PropertyContainerComponent, 
          loadChildren: () => import('./<path to lib module>/lib-routing.module').then(m => m.routes)
        },
        {  
          path: 'portfolio/:id',  
          component: PortfolioContainerComponent, 
          loadChildren: () => import('./<path to lib module>/lib-routing.module').then(m => m.routes)
        }
    ]
}

Also ensure either PropertyContainerComponent or lib-component has a <router-outlet></router-outlet> inside them, so that the child route can be rendered.

edited Apr 17 at 9:48

answered Apr 17 at 7:29

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

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

5 Comments

Kedar Marathe Apr 17 at 8:58

No luck! Still facing the same issue lib-component has<router-outlet> and PropertyContainerComponent has <lib-component> selector

Naren Murali Apr 17 at 9:48

@KedarMarathe updated my answer, try importing the routes

Kedar Marathe Apr 17 at 10:08

I tried loadChildren: () => import('@abc/iibrary').then(m => m.LibraryModule) and also loadChildren: () => import('@abc/iibrary').then(m => m.LibraryRoutingModule) I don’t have direct access to the routes from the library. The library is published and then integrated into the app. Is there a way to export the routes separately from the library?

Naren Murali Apr 17 at 10:20

@KedarMarathe instead of importing the routing, redefine the routing and import the components

Kedar Marathe Apr 21 at 5:07

This worked for me. Thanks @NarenMurali

Collectives™ on Stack Overflow

Angular Library Routing Not Working When Used Inside Angular 19 App

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related