How to access components created under nested modules via direct url path in browser

Question

How can I access components created under nested modules via direct url path in browser.

app module
    -- device module
        -- module-building module
            -- BuildingComponent

'module-building' module is created under device module which is again under app module.

I want to access BuildingComponent of 'module-building' module directly through url in browser.

In device-routing.module.ts I have done like this,

{
     path: 'building', loadChildren: () => import(`./module-building/module-building.module`).then(m => m.ModuleBuildingModule)
}

In module-building-routing.module.ts I have done like

{
    path: 'building3', component: BuildingComponent
}

When I try to access the BuildingComponent with below url it is not loading.

http://localhost:4200/building/building3

What am I missing? I am new to Angular.

Answer 1

Please make sure you Imported ModuleBuildingRouting in ModuleBuildingModule. (file: module-building.module.ts)

 @NgModule({
  declarations: [BuildingComponent],
  imports: [
    CommonModule,
    ModuleBuildingRouting, //<-- here   
  ]
})
export class ModuleBuildingModule { }