Breadcrumbs are not displayed for lazy loaded module

[luizagabriela]

🐞 Bug report

Description

I'm trying to display the breadcrumb for a lazy loaded module but there is an error in the breadcrumb.service file on line 274 related to the _loadedConfig. The _loadedConfig property is undefined.

I'm using the changes from this Pull request , because I have to use the new feature of displaying the breadcrumb using a resolver.

This is the piece of code from the breadcrumb service where the _loadedConfig is undefined. ( baseChild = routeConfig._loadedConfig.routes.find(); )

 private mergeWithBaseChildData(
    routeConfig,
    config: BreadcrumbConfig
  ): BreadcrumbObject {
    if (!routeConfig) {
      return this.extractObject(config);
    }

    let baseChild;
    if (routeConfig.loadChildren) {
      // To handle a module with empty child route
      baseChild = routeConfig._loadedConfig.routes.find(
        (route) => route.path === ''
      );
    } else if (routeConfig.children) {
      // To handle a component with empty child route
      baseChild = routeConfig.children.find((route) => route.path === '');
    }

    const childConfig = baseChild?.data?.breadcrumb;
    return childConfig
      ? this.mergeWithBaseChildData(baseChild, {
          ...this.extractObject(config),
          ...this.extractObject(childConfig),
        })
      : this.extractObject(config);
  }

Angular Version: "14.2"
Angular Router Version: "14.2"

I found a fix for this bug. There is another property of routeConfig that is of Router type and is called _loadedRoutes. This object contains the component and path of the route and can be used instead of _loadedConfig property.

private mergeWithBaseChildData(
    routeConfig,
    config: BreadcrumbConfig
  ): BreadcrumbObject {
    if (!routeConfig) {
      return this.extractObject(config);
    }

    let baseChild;
    if (routeConfig.loadChildren) {
      // To handle a module with empty child route
      baseChild = routeConfig._loadedRoutes.find(
        (route) => route.path === ''
      );
    } else if (routeConfig.children) {
      // To handle a component with empty child route
      baseChild = routeConfig.children.find((route) => route.path === '');
    }

    const childConfig = baseChild?.data?.breadcrumb;
    return childConfig
      ? this.mergeWithBaseChildData(baseChild, {
          ...this.extractObject(config),
          ...this.extractObject(childConfig),
        })
      : this.extractObject(config);
  }

This change is needed to display the breadcrumbs in the lazy loaded modules.

What do you think? Can these changes be made as part of the pull request related to the routeSnapshot data available in breadcrumb function?

Thanks!

[github-actions]

Hello 👋 @luizagabriela
Thank you for raising an issue. We will investigate into the issue and get back to you as soon as possible. Please make sure you have given us as much context as possible.
Feel free to raise a PR if you can fix the issue. Check the local development guide

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.