Prevent a parent route's component from firing when landing on child route

Issue

I have a parent route setup with a single child route. When landing/refreshing the child page the parent component fires, making requests, life cycle hooks etc.

How can I make the child component load without its parent page firing? Perhaps there is a global routing option or something.

  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        loadChildren: () => import('./child/child.routes'),
      },
    ]
  }

Additional: Above is my parent.route.ts and the app is 100% standalone components

Solution

Parent routes always activate their components when a child route is loaded.

The answer is that when working with dynamic params to drive data you must react to their changes and fetch/display data this way.

ngAfterViewInit(): void {
  // watch for profile ID change
  this.router.events
    .pipe(filter((event: Event) => event instanceof NavigationEnd))
    .subscribe((res: NavigationEnd) => {
        this.checkProfileOwner(); 
    });

In the case above - watch for new URL props to fetch that profile Also check if we're on a child page and don't fetch anything

if (this.activatedRoute?.firstChild?.routeConfig?.path !== 'id') {
  // do nothing

The same rules apply on the child page:

1. confirm if current route is parent or child
2. load/unload/don't load data based on URL

Answered By - Ben Racicot