One issue I am facing is that the event gets triggered on some components but not others. For example, it fires as soon as I route to all other components except for the Landing component. Below are my code snippets:
<-- Main Component -->
<div class="body-scroller">
<app-nav></app-nav>
<div class="body-wrapper">
<div class="main-wrapper">
<div class="main-content">
<router-outlet></router-outlet> // LandingComponent and Other Components rendered here
</div>
<app-footer></app-footer>
</div>
</div>
</div>
<-- Landing Page Component -->
<div class="landing-page-content">
....
</div
<div class="home-content">
<router-outlet></router-outlet> // HomeComponent rendered here
</div>
<-- Routing.ts -->
{
path: 'main',
component: MainComponent,
children: [
{
path: 'landing-page',
component: LandingPageComponent,
children: [
{
path: '',
redirectTo: 'home',
pathMatch: 'full' },
{
path: '',
component: HomeComponent,
}
]
},
{
path: 'signup',
component: SignupComponent
},
]
},
{
path: 'about',
component: MainComponent,
children: [
{
path: 'about',
component: AboutComponent,
},
{
path: 'contact',
component: ContactComponent
},
]
}
What could be causing the event to not fire on the landing component?