Load different modules under the same url id

I have an URL ...steps/<step-id>... and under this URL different modules can be loaded based on type field of object retrived based on step-id.

The issue is probably caused by race condition, because at first I'm retriving the object with required type in selector with the getRouterState usage.

And based on that I can run module:

 stepsMapper = {
        'ModuleA': async () => (await import ('@app/web/modules')).ModuleA,
        'ModuleB': async () => (await import ('@app/web/modules')).ModuleB,
        'ModuleC': async () => (await import ('@app/web/modules')).ModuleD,
 };

And run this like this:

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
    ],
    providers: [
        {
            provide: ROUTES,
            useFactory: routesFactory,
            deps: [ StepsFacade ],
            multi: true,

        },
    ],
    declarations: [ StepsComponent ],
})
export class StepsModule {
}

function routesFactory (stepsFacade: StepsFacade) {

    return {
        path: '',
        component: StepsComponent,
        children: [
            {
                path: ':id',
                loadChildren: stepsFacade.getVal(),
            },
        ],
    };
}

and

getVal () {
     return this.stepsMapper[this.typeThatsNeedToBeLoaded];
}

Do you know how to bypass this race condition or is there better solution for this issue? Thanks