How do I setup a tour for Ionic 8 in a standalone Angular project?

[velkind]

Hello folks,

I have an Ionic 8 project based on Angular 18 using standalone components (no modules at all). I tried to implement an Ionic tour for it but without success. Here is my project structure:

-/src
--/app
---/pages
----/dashboard
-----dashboard.page.html
-----dashboard.page.ts
----/tabs
-----tabs.page.html
-----tabs.page.ts
-----tabs.page.routes.ts
---app.component.ts
---app.routes.ts
--main.ts (bootstrapping is made here)
-package.json

Dashboard page is one of the tabs defined in tabs.page.ts. I want the tour to start on Dashboard page with popovers over the tabs defined in tabs.page.html and some UI elements defined in dashboard.page.html.

This is what I have made so far:

1. TourIonPopoverModule is imported into app.component.ts, tabs.page.ts and dashboard.page.ts (for sure)
2. tourAnchors are set in tabs.page.html and dashboard.page.html like this:
   <ion-buttons tourAnchor="settings-button">
<ion-tab-button tab="dashboard" tourAnchor="dashboard-button">
3. tourService is injected into dashboard.page.ts and steps as IStepOption array are declared in dashboard.page.ts:

  private readonly tourService = inject(TourService);
  private readonly steps: IStepOption[] = [
    {
      anchorId: "settings-button",
      title: "Settings",
      content:
        "Sampple text about settings",
    },
    {
      anchorId: "dashboard-button",
      title: "Dashboard",
      content: "Sample text about dashboard",
    },
  ];

4. tour is started right after the dashboard page was loaded.

I'm using ngx-ui-tour-ionic version 5.0.0 to achieve this and currently facing following problems:

1. All Ionic icons are not loaded properly anymore after I have imported TourIonPopoverModule:
   [Ionicons Warning]: Could not load icon with name "eye-outline".
   The only way that helps is a manually importing all Ionic icons and their registration in tabs.page.ts and dashboard.page.ts. Is there another way to solve this problem?
2. Highlighting an UI element works but no popover is visible (not at the top and not at the bottom). What could be the problem?

Many thanks in advance!

Regards
Valdes

[velkind]

This is how it looks like:

[hakimio]

Hi,

If you are still facing the issue, can you create a stackblitz or github reproduction of it?

[velkind]

Hi @hakimio,

Thank you for your response. I've already implemented a working tour in my own way. I think my problem was that the tour was spread on multiple pages and as soon I imported IonicModule to more than one page UI elements of ngx-ui-tour were not rendered properly anymore (like on the screenshot I attached).

Best regards
Valdes