You can try and use a resolver to first fetch data from your backend. Before you process it see ref for using the resolver.

You can use this code as a guide ultimately this should work in theory

@Injectable({
  providedIn: 'root'
})
export class DataChildrenResolver implements Resolve<Page[]> {
  constructor(private formService: FormService) {}

  resolve(): Observable<Page[]> {
    return this.formService.findRoutes(); //<- data from the backend
  }
}

You can then modify your Routes to use the Resolver or children data before the route is activated

const routes: Routes = [{
  path: 'data/some-url',
  component: Anycomponent,
  resolve: {
    children: DataChildrenResolver 
  },
  data: {
    pages: MENU_PAGES
  }
}];

Update your components to use the resolved Data

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app',
  templateUrl: './Yourcomponent.html'
})
export class Yourcomponent implements OnInit {
  children: Page[];

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // accessing data
    this.children = this.route.snapshot.data['children'];
  }
}

Below is how your route-path structure should be for it to work (if you have restrictions on your route-path).

{
 path: 'base'
 canActivate: [BaseGuard],
 resolve: {data: BaseDataResolver}
 children: [
  {
    path: 'child',
    guards: [ChildGuard],
    component: ChildComponent,
    resolve: {childData: ChildDataResolver}
   }
 ]
}

This can be achieved using a resolver, resolver is a service that fetches data before a route is activated. It’s used to ensure that certain data is available before a component is loaded.

Create a resolver

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {
  constructor(private dataService: DataService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    return this.dataService.getData();
  }
}

Configure the resolver in your routing module to access the data component

const routes: Routes = [
  {
    path: 'data',
    component: DataComponent,
    resolve: { data: DataResolver }
  }
];

Access resolved data in your component

export class DataComponent implements OnInit {
    data: any;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
    this.data = this.route.snapshot.data['data'];
    }
}