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?

Tony · Accepted Answer · 2020-04-12 11:38:59Z

0

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

answered Apr 12, 2020 at 11:38

Tony

20.3k7 gold badges42 silver badges62 bronze badges

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

5 Comments

Gloire Over a year ago

I removed that object from the children property. Now, when I access localhost:4200 I get the view of the home component as expected. However, when I access localhost:4200/dashboard I get the dashboard view only and not the dashboard view inside the home component's view.

Tony Over a year ago

You should define main route for that module

Gloire Over a year ago

Sorry I don't understand what you mean. Which module are you referring to? "that module"

Tony Over a year ago

What I mean you have to define a child route for dashboard module

Gloire Over a year ago

I do have a child route in the dashboard module. But it's an invalid configuration in the campaign module's routing module that was causing issues. Fixed that and the pages /dashboard and /campaigns are now loading properly. Thanks a lot for your assistance.

Collectives™ on Stack Overflow

Angular lazy load modules from main component

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