Lazy loaded modules about ngx-bootstrap-product-tour HOT 11 CLOSED

Update: Working fine after upgrading to angular 5.

from ngx-bootstrap-product-tour.

@suparnavg No problem, let's figure this out.

First, please check that you are using latest version because the lazy loading bug was fixed with version 2.0.2

Let's do a quick check of the setup:

• You've imported NgxBootstrapProductTourModule.forRoot() in your main app
• You've imported NgxBootstrapProductTourModule in your lazy loaded module
• You've added to the root component
• You've called tourService.initialize and added all the steps in it

If you done all of these steps next thing you can do is add tourService.events$.subscribe(console.log); to the component where you initialize tourService so that you can see all tour steps that are being registered and all of their data.

Also in the demo there is example of lazy loaded module and that might help. The code can be found here

If you've done all above and it still doesn't work:
I would need you to provide me with some code example so I can debug it.

from ngx-bootstrap-product-tour.

Thanks @NMilicic - I've checked off all items on the checklist.

Logging the tourService events, I can see that all anchors are registered, as shown in the screenshot below.

Additionally, on launching the tour via tourService.toggle(), the stepShow event shows correctly, with the content of the tourStep.

Lastly, I verified that everything works fine if the tour is initiated in a non-lazy-loaded component.

Maybe my issue is caused because I am initiating the tour inside the lazy loaded component?

I am putting together a plunkr to replicate the issue. Will share it here.

from ngx-bootstrap-product-tour.

Here is a link to a repo that replicates the issue

I did some exploring of the package and if it helps - one or both of these conditions in this ngIf is evaluating to null.

*ngIf="tourService.currentStep?.backdrop && tourService.isStepOpen(tourService.currentStep)"

from ngx-bootstrap-product-tour.

Are you missing the import for the routingModule in product-tour-issue/src/app/app.module.ts?

Also can we highlight what

"You've added to the root component"

means. Added what?

from ngx-bootstrap-product-tour.

You're right @evm2556 , the import is missing in my demo repository - I left that out by mistake, now it is fixed. However this import was present in my project, so that is not causing the issue.

What i understood from ""You've added to the root component"" was has the line below been added to app.component.html or not.

<ngx-bootstrap-product-tour></ngx-bootstrap-product-tour>

from ngx-bootstrap-product-tour.

I've been able to reproduce the problem, but I have bad news :(
I'm not sure that I will be able to fix this for angular 4.

The problem is with the DI in angular 4. The NgxBootstrapTourService should be a singleton and that is achieved with .forRoot() import, but since I need to use a directive in the child module you need to declare NgxBootstrapModule in that child module and because of that only on lazy loaded modules new instance of the service is created.

I will investigate more during this week and try to find some solution.

from ngx-bootstrap-product-tour.

from ngx-bootstrap-product-tour.

@suparnavg Demo uses angular 5 and tour version 2.0.2 and it that version lazy loaded modules works fine.

The version 1.0.6. won't work with lazy loaded module especially if you plan to have a part of the tour in the module that is not lazy loaded and the part in the lazy loaded module and that is because of the DI.

from ngx-bootstrap-product-tour.

from ngx-bootstrap-product-tour.

from ngx-bootstrap-product-tour.