What is the actual way to work with ngx-ui-tour in an ionic app?

[hvma411]

Hello, there!

I have read the documentation for using ngx-ui-tour in an ionic app but actually it says nothing specific... So, there are a few informations like:

1. Import package in app.module.ts
2. Add tour-step-template to root app component
3. Define tourAnchor with step id
4. Initialize tour steps and start tour

But, it does not work. Actually this way gives me only console information: "Can't attach to unregistered anchor with id someid". I figured it out and it works fine but only when I import ngx-ui-tour in another module where my tour step is defined.

So, is there any way to import it once like .forRoot() in app module or I have to import it in every module my app has? Of course I know that I can probably use shared module but maybe there is something that I'm missing

Thanks

[hakimio]

It's the same like in any other Angular application. If you want to use component or directive in your html template, you have to import the Angular module or standalone component/directive providing that component/directive.

The same applies to tourAnchor directive: if you want to use it, you have to import either TourIonPopoverModule which defines both the tourAnchor directive and <tour-step-template> component or just import the standalone TourAnchorIonPopoverDirective directive.

If you are using smart IDE like "JetBrains Webstorm", it will warn you about the missing import:

Check the lazy tour demo source code for more info.