如何将bootstrap-tour集成到angular应用程序？

Question

Im trying to use the bootstrap-tour to my angular app so i´ve added it to my bundle:

   //css
   "../node_modules/bootstrap-tour/build/css/bootstrap-tour-standalone.css"

   //js  
   "../node_modules/bootstrap-tour/build/js/bootstrap-tour-standalone.js"

Then in my component i tried to make a simple tour:

     ngAfterViewInit() {
       let tour = new Tour({
       name:'tour',
       template: `<div>
           <h3>Test</h3>
         </div>`,
       steps: [
        {
            element: "#test",
            title: "Title of my step",
            content: "Content of my step"
        }
      ]
     });           

      tour.init();
      tour.start();
   }

But on my console i get the error: vendor.bundle.js:149550 ERROR TypeError: Cannot read property 'backdrop' of undefined at Tour._showPopoverAndOverlay

Any ideas on how to solve it?

Answer 1

The problem you are having is that Tour class, which is coming from the bootstrap-tour package, is not known to typescript. What you have to do:

Inside the component,

declare var Tour: any;

Then the ngAfterViewInit() part, do the initialization:

this._ngZone.runOutsideAngular(() => {
    this.tour = new Tour({                           
        debug: true,
        storage: false,                        
        backdrop: true,
    });
    this.tour.addStep({
        element: ".tour-nav-1",
        title: "Title of my step 1",
        content: "Content of my step 1",
        placement: 'bottom',
        backdrop: true,
    });
    this.tour.addStep({
        element: ".tour-nav-2",
        title: "Title of my step 2",
        content: "Content of my step 2",
        placement: 'bottom',
    });
    // Initialize the tour
    this.tour.init();
});

and voila, you're all set. Note that the this._ngZone is the ng zone which you can instantiate inside the constructor of the component like this:

constructor(private _ngZone: NgZone) {}

You can then run the

this.tour.start(true);

command anywhere inside the component to start the tour, just make sure the this.tour.init() is called before the this.tour.start() .

Note that the this.tour is a component class variable that is declared as:

tour: any;

I have tested this to be working fine with bootstrap-tour version 0.12.0 and angular version 6.0.0. It should work just fine for any angular versions > 2

If you have any questions, just ask.

Answer 2

Niz is correct but one more important note to add is NOT to import the bootstrap-standalone file into the component. I was doing that and putting it in the bundle in the .angular-cli.json file as well and it wasn't working correctly.

I'm guessing that since it found a reference for Tour inside the component then the

this._ngZone.runOutsideAngular

wasn't really doing anything.