tourService.start() emits tourService.end() about ngx-tour HOT 13 CLOSED

I would put a console.log where you are calling tourService.start() to make sure that you're not calling it twice. Also, are you calling tourService.initialise() with the steps?

from ngx-tour.

Thanks for your reply! My code looks like this:
this.tourService.events$.subscribe(console.log);
this.tourService.initialize([{
anchorId: "dashboard.first",
content: "This is an interactive tour.",
title: "Welcome",
route: "pages/dashboard"
}, {
anchorId: "dashboard.second",
content: "Look at this beautiful chart.",
title: "Chart 1",
route: "pages/dashboard"
}, {
anchorId: "dashboard.third",
content: "And here is another one!",
title: "Chart 2",
route: "pages/dashboard"
}]);
console.log("before start");
this.tourService.start();
console.log("after start");

The console output is:
{name: "initialize", value: Array(3)}
app.component.ts:59 before start
Subscriber.js:238 {name: "start", value: undefined}
app.component.ts:61 after start
Subscriber.js:238 {name: "end", value: undefined}
Any ideas?

from ngx-tour.

Try taking the route property off of all the steps. It might be ending the tour when it can't navigate to that route.

from ngx-tour.

Actually, that's probably not the problem. It's ending the tour because it can't find an anchor with an anchorId that matches the first step. The tourAnchor directive will automatically register itself in the ngOnInit method.

from ngx-tour.

Ok, my html template for the dashboard looks like this (ba-card is a custom component which uses a bootstrap card):

<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<pie-chart tourAnchor="dashboard.first"></pie-chart>
</div>
</div>
<div class="row">
<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-12" cardTitle="dashboard.acquisition_channels" baCardClass="traffic-panel medium-card">
<traffic-chart tourAnchor="dashboard.second"></traffic-chart>
</ba-card>
<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-md-6 col-sm-12 col-12" cardTitle="dashboard.revenue" baCardClass="medium-card">
<line-chart tourAnchor="dashboard.third"></line-chart>
</ba-card>
</div>

Is there anything else I need to do to declare tourAnchors?

from ngx-tour.

That should be right. Add this line before the tourService.start()

console.log(this.tourService.anchors);

from ngx-tour.

Maybe the tourAnchors have not hit their ngOnInit hook yet. Where are you calling tourService.start()?

from ngx-tour.

Your guess is correct, this.tourService.anchors is empty at the start() call. I have placed both the initialize([]) and the start() calls within the constructor of my app.component.ts. But even if I move them to ngAfterContentInit() the anchors are still empty. I will try to get that right tomorrow... thanks a lot for your help so far!

from ngx-tour.

Same Problem here, The anchors are still empty. You found a solution?
We have one abstraction more. An App.Module and a Layout.Module with the Shell.Component. In the Shell.Component we have the router-outlet. But the Tour-Code is still in the App.Component is that right?

from ngx-tour.

@RetoRechsteiner
The tour steps being initialized in the app component is fine. It's hard for me to debug your app without seeing code. Can you make a git hub repository that reproduces the issue? Or you can sign up for a (paid) session with me on codementor and I can look directly at your app code.

from ngx-tour.

My colleague found a solution for this problem: you need to import the tour module (in our case TourNgBootstrapModule) in each and every sub module.

from ngx-tour.

I'm glad you found a solution.

from ngx-tour.

Same Issue .. i have done all the steps provided by @kulmann .. still getting
{name: "start", value: undefined}
{name: "end", value: undefined}
Help me out!!!

from ngx-tour.