Skip to content
This repository was archived by the owner on Feb 17, 2026. It is now read-only.
This repository was archived by the owner on Feb 17, 2026. It is now read-only.

WizardSteps service doesn't work with NgRx effects #120

@miprib

Description

@miprib

When injecting WizardSteps service to an NgRx effect a warning occurs that breaks further WizardSteps usage:

sebgroup-ng-wizard.js:424 No valid route config found for current route: "".
Make sure route guards provide a fallback if a access to a step is restricted and that inactive sub steps are handled too, using a wildcard route.

In our case, routes are configured correctly as described in the documentation. What is more, this doesn't happen when injecting WizardSteps to a regular Angular service.

Reproducing the issue

This issue can be reproduced in a sample seb-ng-wizard project (e.g. https://github.com/sebgroup/ng-wizard/tree/master/projects/seb-ng-wizard-lazy-demo):

  1. Install NgRx store and effects
  2. Create any effect and provide it in a module
  3. Inject WizardSteps to the created effect
  4. Launch the application and the before mentioned warning will appear.

Workaround

After playing around with it a little, we discovered that by extracting WizardSteps constructor code into a method and placing it in a timeout, the issue is resolved:

constructor(private router: Router, private _location: Location) {
  setTimeout(() => {
    this.init();
  }, 0);
}

Uppon further investigation we saw that the error occurs because of undefined access to routes (line 43). In essence, this._config.config['_loadedConfig'].routes[0].children can't find _loadedConfig initially but works just fine with setTimeout(...). Perhaps a race condition occurs somewhere?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions