angular waypoints typescript error module not foun

问题:

I installed the waypoints library with npm install waypoints and added types with

npm install --save @types/waypoints.

I get the error /node_modules/@types/waypoints/index.d.ts' is not a module.

Using waypoints.js in Angular 4 application

discuses the same problem. The user had the same error. One comment suggests "Use export package_name = package_name. this should work" I didn't know how to implement that.

I tried to add

export = waypoints
export as namespace waypoints;
declare namespace waypoints { 

}

import * as Waypoint from 'waypoints';

When I then try to import the waypoint I get no error. But if I then add a waypoint like this:

let waypoint = new Waypoint.Waypoint({
  element: document.querySelector("#p5"),
  handler: function () {

  },
});

I get another error ->

Module not found: Error: Can't resolve 'waypoints'

回答1:

The exports

export = waypoints
export as namespace waypoints;
declare namespace waypoints { 

}

will not solve the problem. Don't change anything in @types/waypoints, just add declare const Waypoint: any; to the component where you need it. Like simple example

declare const Waypoint: any; // Declare the Waypoint class here to access it

@Component({
  selector: 'my-comp',
  template: '<div id="abc">Abc</div>',
})
export class MyComponent implements OnInit {
  ngOnInit() {
    let wp = new Waypoint({
      element: document.getElementById("abc"),
      handler: (direction) => {
        if (direction == 'down') {
          wp.element.classList.add("fadeInUp");
          wp.destroy();
        }
      },
      offset: '95%'
    });
  }
}

This is solve the complation error(s). As we know that Waypoint will be present once the app is running so just declaring Waypoint class as of type any would do the trick.