Setting up tether-drop to work with [email protected]

Question

I'm having difficulty figuring out how to setup tether-drop with my angular 2 app created with [email protected].

Steps to reproduce:

1. Create a new project with the angular-cli.
   • ng new tester --skip-git
2. Follow the angular-cli instructions for installing third party library:
   • npm install tether-drop --save
   • npm install @types/tether-drop --save
3. At this point I fully expect to be able to use the following line in app.component.ts
   • import { Drop } from 'tether-drop';

But when I ng serve the result is this error:

• ERROR in ./src/app/app.component.ts Module build failed: Error: D:/Visual Studio Code/tester/src/app/app.component.ts (3,10): Module '"D:/Visual Studio Code/tester/node_modules/@types/tether-drop/index"' has no exported member 'Drop'.) at _checkDiagnostics (D:\Visual Studio Code\tester\node_modules\@ngtools\webpack\src\loader.js:116:15) at D:\Visual Studio Code\tester\node_modules\@ngtools\webpack\src\loader.js:141:17 @ ./src/app/app.module.ts 14:0-47 @ ./src/main.ts @ multi main

I have struggled mightily with integrating third party libraries into angular-cli generated projects (webpack). I managed to get some of them working but a solution for this one is alluding me.

Can someone please enlighten me and remove this burden of ignorance from me?

Answer 1

It seems that you need to change your import to:

import * as Drop from 'tether-drop';

And then you can use it as per the README:

const dropInstance = new Drop({
  /* options here */
});