ngx-ui-tour: 🐞 - Unable to make a second tour work on another route

Which ngx-ui-tour-* package is the source of the bug?

ngx-bootstrap

Please provide a link to a minimal reproduction of the bug

No response

Description

Hi,

Versions used:

• Angular 9.1
• ngx-ui-tour-core 7.0.2
• ngx-ui-tour-ngx-bootstrap 7.0.2

I have the tour (with ngx-bootstrap) working on my main page : it launches automatically on first login, and can be launched manually using a CTA in the header. So, in order to be able to initialize and start the tour from different components, I created a custom Tour service, injecting the original TourService and implementing most of the methods and observables.

The problem is when I try to add a second tour on another route, it won’t work. Basically, I:

1. build an array of steps
2. pass it to initialize()
3. then start() the tour

On the second page, the browser’s console shows the warning : Can't attach to unregistered anchor with id tour-secondpage-firststep. Even though an element has the property anchorTour="tour-secondpage-firststep", properly spelled in both cases.

So I then tried to use the register() method from the TourService, resulting in an error poping in the console Error: anchorId tour-secondpage-firststep already registered!… I may have misused this register() method because I could not find any documentation or example, especially regarding the TourAnchorDirective parameter.

I also tried using startAt(stepId) instead of start() : it does not change anything.

Then, I tried setting the isAsync property to true (because while the data is loading, a black transparent overlay with a spinning loader is displayed, so I thought “why not?”). No luck. Actually, when I do that, there is a slight difference in the behavior :

• The tour seems to work well until it reaches the start$ observable
• After that, the stepShow$ observable is never reached
• Even though the steps seem to be properly registered (logging the initialize$ observable response shows the steps are there)

But that’s it, for now I’m stuck with no idea how to make this work a second time at another place in the app, or simply why it does not work.

According to this issue (https://github.com/hakimio/ngx-ui-tour/discussions/58), initializing several tours (each with different steps) is seems to be possible. But is it also true if I’m using the version 7.0.2 ?

Anyway, if you have any idea how I could solve this problem, that would be great!

Angular version

9.1

Ngx UI Tour version

7.0.2

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android