Angular lib with route - Stack Overflow

Using Angular 18, I have a workspace and within it a lib-one. I want to know how I can apply routes within lib-one? Is it possible?

Within the lib-one I have two components: component-a and component-b. I have to navigate between them respectively, in the routes:

/a

/b

How can I do this within the library?

Using Angular 18, I have a workspace and within it a lib-one. I want to know how I can apply routes within lib-one? Is it possible?

Within the lib-one I have two components: component-a and component-b. I have to navigate between them respectively, in the routes:

/a

/b

How can I do this within the library?

• angular
• routes
• router

Share Improve this question Follow asked yesterday José DamiãoJosé Damião 31522 silver badges99 bronze badges 1

• Well it depends a bit if you are using lazy loading or not. And if you are using modules or standalone components. But in general, it doesn't matter if you are using libs or not, stuff in libs to be used needs to be exported from the lib and imported and used in another place (for example app). – Thomas Renger Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes, you can define and apply routes within an Angular library such as lib-one. Libraries in Angular can include routing, allowing navigation between the components defined within that library.

Step 1: Define a Routing Module in lib-one

Define routes for your components.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComponentA } from './component-a/component-a.component';
import { ComponentB } from './component-b/component-b.component';

const routes: Routes = [
  { path: 'a', component: ComponentA },
  { path: 'b', component: ComponentB },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class LibOneRoutingModule {}

Step 2: Update the lib-one Module

Include LibOneRoutingModule in your library module's imports.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentA } from './component-a/component-a.component';
import { ComponentB } from './component-b/component-b.component';
import { LibOneRoutingModule } from './lib-one-routing.module';

@NgModule({
  declarations: [
    ComponentA,
    ComponentB,
  ],
  imports: [
    CommonModule,
    LibOneRoutingModule, // Add routing module here
  ],
  exports: [
    ComponentA,
    ComponentB,
  ],
})
export class LibOneModule {}

Step 3: Configure the Parent Application

To use routes defined in your library, add the library's routing module as a lazy-loaded module in parent application's AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/a', // Default route, if required
    pathMatch: 'full',
  },
  {
    path: 'lib-one',
    loadChildren: () =>
      import('lib-one').then((m) => m.LibOneModule), // Lazy load the library
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Step 4: Navigate between the Routes

Navigating in Application: Navigate to /lib-one/a for componentA and to /lib-one/b for componentB.

goToB() {
  this.router.navigate(['/lib-one/b']);
}

Navigation within lib-one: Navigate to a for componentA and to b for componentB.

goToB() {
  this.router.navigate(['b']); // Navigate to /b within lib-one
}