Angular lazy load modules from main component

Question

I have the below setup in my app.routing.module.ts.

app.component.html

<router-outlet></router-outlet>

modules/core/components/home/home.component.html

<mat-sidenav-container autosize>
<mat-sidenav #sidenav role="navigation">
    <!--this is a place for us to add side-nav code-->
    <wn-sidenav-list (sidenavClose)="sidenav.close()"></wn-sidenav-list>
</mat-sidenav>
<mat-sidenav-content>
    <!--in here all the content must reside. We will add a navigation header as well-->
    <wn-header (sidenavToggle)="sidenav.toggle()"></wn-header>
    <main>
        <!-- I want the components child components of the home components to be loaded here -->
        <router-outlet></router-outlet>
    </main>
    <wn-footer></wn-footer>
</mat-sidenav-content>

Problem

When I access localhost:4200/campaigns or localhost:4200/dashboard their respective components are displayed but they aren't using their parent's (home.component.html) view

My Goal

I want all sub-components of the home component to be displayed in the router-outlet of the home.component.html and other components will be displayed in the router-outlet of app.component.html

I've had a setup like this before but I wasn't using modules at the time and it was working perfectly. Is there something about lazy loading that I don't understand?

Answer 1

When I access localhost:4200/campaigns or localhost:4200/dashboard the components of the campaign module are displayed but they aren't using their parent's (home.component.html) view

In your route config you are using redirectTo:'/dashboard' so that's why you will see the view of campaign modue