trouble calling/Loading .js classes and functions from simple Angular2 app written in .ts

Question

I have a simple angular application (https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html) and I am attempting to add graphical overlays using hopscotch.js (http://linkedin.github.io/hopscotch/). I got hopscotch to run successfully from my index.html by calling this script:

` //my_tour.js
  // Define the tour!
  var tour = {
    id: "hello-hopscotch",
    steps: [
      {
        title: "My Header",
        content: "This is the header of my page.",
        target: "title",
        placement: "bottom"
      }
    ]
  };

  // Start the tour!
  hopscotch.startTour(tour);`

but when trying to make it apart of my angular app I cannot/do not know how to correctly connect it with its dependencies(hopscotch.js, hopscotch.css). I am very new to angular2 and have spent most of today researching this but to no avail. Something as simple as a .ts file that is apart of my app and can make a call to hopscotch.startTour(tour); would be sufficient. Any help would be appreciated! Thanks.

Possible duplicate of [How to import js-modules into TypeScript file?](https://stackoverflow.com/questions/41219542/how-to-import-js-modules-into-typescript-file) — AP., May 23 '17 at 20:09
Possible Dublicate: https://stackoverflow.com/questions/41219542/how-to-import-js-modules-into-typescript-file — AP., May 23 '17 at 20:09

score 0 · Answer 1 · answered Feb 09 '18 at 00:23

This is what I did with Angular 4.4.6:

Install hopscotch.

npm install hopscotch --save

In ".angular-cli.json"...

{
  "apps": [
    {
      "styles": [
        "../node_modules/hopscotch/dist/css/hopscotch.min.css"
      ]
    }
  ]
}

In "your.component.html"...

<div #elementOneId>Element One</div>
<div #elementTwoId>Element Two</div>    
<button (click)="doTour()">Do Tour</button>

In "your.component.ts"...

import * as hopscotch from 'hopscotch';

export class YourComponent {

  @ViewChild('elementOneId') elementOne: ElementRef;
  @ViewChild('elementTwoId') elementTwo: ElementRef;

  doTour() {      
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Step 1",
          content: "blah blah blah",
          target: this.elementOne.nativeElement,
          placement: "left"
        },
        {
          title: "Step 2",
          content: "I am the step for element 2...",
          target: this.elementTwo.nativeElement,
          placement: "bottom"
        },
      ]
    };

    hopscotch.startTour(tour);

  }

}

trouble calling/Loading .js classes and functions from simple Angular2 app written in .ts

1 Answers1