Angular 2 Child Route On Library Component Not Running

Question

I have a demo app I am using to test a custom library I have created. I am importing my library and using the custom component in the demo app and that is running just fine, but I can't get the child route (router-outlet) to show. The child component never loads.

In my demo app, I have just a really basic angular component that brings in the library component.

DEMO APP:

My demo page loads at localhost:4200/demo. This route loads the demo-component.html, which is:

<library-component
      [name]="name"
      [phone]="phone">
</library-component>

demo app-routing.module.ts:

const routes: Routes = [
   {
       path: '',
       pathMatch: 'full',
       redirectTo: 'landing-page'
   },
   {
     path: 'landing-page',
     loadChildren: () => import(./landing-page.module).then(m => m.LandingPageModule)
   {
      path: 'demo',
      loadchildren: () => import(./demo.module).then(m => m.DemoModule)
   }
]

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

export class AppRoutingModule {}

The demo module just simply imports the LibraryComponentModule. And that loads the library component's HTML onto the screen. My issue is getting the router-outlet to load the child route/component inside my library.

SEPARATE LIBRARY BEING IMPORTED INTO DEMO APP:

my library component.html:

<section>
    {{name}
    {{phone}}
    <router-outlet></router-outlet> --> This is the issue, never loads.
</section>

my library-routing.module.ts:

const routes: Routes = [
       path: '',
       component: LibraryComponent,
       children: [
           path: '', component: ChildLibraryComponent
        ]

  ] 

Child Library Component: (this will NOT load for me)

my child-library.component.html:

<div>Hello World</div>

my child-library-routing.module.ts:

const routes: Routes = [
 {
    path: '',
    component: ChildLibraryComponent
 }
]

I am getting the name and phone inputs to show but the router outlet never loads the ChildLibraryComponent. What am I missing here? I haven't been able to find anything else that solves my issue.

Answer 1

First of all, why do we even need child-library-routing.module.ts, isn't the route added as a child in library-routing.module.ts?

If there's a single child library component, why un-necessarily nest the routes, just inject it directly instead of adding the route.

Also your library route is not properly formatted, not sure if it's even working.

const routes: Routes = [
       {
        path: '',
       component: LibraryComponent,
       children: [
           path: '', component: ChildLibraryComponent
        ]
      }
  ] 

'{}' to mark it's all a single route path.

Lastly, try getting rid of the ''. Instead provide a proper route value.

const routes: Routes = [
  {
   path: '', redirectTo: 'home', pathMatch: 'full'},
   {
    path: 'home'
  component: LibraryComponent,
  children: [
      path: '', component: ChildLibraryComponent
   ]
 }
]