Q: Angular a single route path but different component and children Hoping to get some help, I have a single path in my routing.module.ts called register that has children and a component.
The problem I have is that I need to make the children and the component dynamic which depend on an observable.
The observable tells me whether to use one form or another.
routing.module.ts
  const scandiRoutes = this.formStepRoute.toRoutes(this.site.scandi);

  const registerWithScandi = [
    {
      path: 'register',
      component: this.site.scandi.rootComponent,
      children: [...scandiRoutes],
      canActivate: [ScandiGuard],
    },
  ];

  const ukRoutes = this.formStepRoute.toRoutes(this.site.uk);

  const registerWithUK = [
    {
      path: 'register',
      component: this.site.uk.rootComponent,
      children: [...ukRoutes],
      canActivate: [],
    },
  ];

  const routeConfig: Routes = routes.concat(registerWithScandi, registerWithUK);

scandi.guard.ts
canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.countryService.country$.pipe(
      map((country: string) => {
        return country === 'FI';
      })
    );
  }
)

The hope is to have the Guard check on register whether the user is in FI country and use the registerWithScandi array of routes else fallback on the registerWithUK.
