Create typings for native javascript libary (vimeo) in angular

At the moment I'm refactoring some of my angular libraries into an NX workspace. The workspace consists of multiple separate libraries for video players.

@types only contains types for YouTube, but not for DailyMotion, Vimeo (not the right ones) nor SoundCloud. In the past I was able to solve this by adding a file

src/lib/interfaces/vimeo.ts

declare namespace Vimeo {
    export class Player {
        ...
    }
}

to my workspace, and referencing it like this in my component:

/// <reference path="../../interfaces/vimeo.ts" />

@Component({
  selector: 'vimeo-player'
})
export class VimeoPlayerComponent { }

This would cause the production build to succeed.

Here's what the angular documentation has to say about this topic.

But if I try to do the same in my new project, I'm getting the following message from NX:

So I've tried to solve it by:

• Moving my type-declarations file to src/types/vimeo/index.d.ts
• Modifying tsconfig.lib.json
  • Add to types: "types": [ "node", "vimeo" ]
  • Include the file: "include": ["**/*.ts", "src/types/vimeo/index.d.ts"]
• Reference the namespace from my component:

'

import 'vimeo';
import { ... } from '...';

@Component({
  selector: 'vimeo-player',
})
export class VimeoPlayerComponent {
    ...
}

Now in VS Code I can litterally click through to the Vimeo player from my component, So I would assume that the declaration file should be working as expected, but still when running

npm run nx run-many -- --target=build --projects=mintplayer-ng-player-progress,mintplayer-ng-vimeo-api,mintplayer-ng-vimeo-player --configuration production

I'm still getting the following errors:

error TS2688: Cannot find type definition file for 'vimeo'.
    The file is in the program because:
        Entry point of type library 'vimeo' specified in compilerOptions
   libs/mintplayer-ng-vimeo-player/src/lib/components/vimeo-player/vimeo-player.component.ts:40:29 - error TS2304: Cannot find name 'Vimeo'.

   40           this.player = new Vimeo.Player(this.domId, {
                                  ~~~~~

This used to work fine, compile without errors, like here, but now I'm getting the above errors. The new repository (NX workspace) is pushed here.

What is the recommended way of consuming native javascript libraries and add typings in angular as of today?

I've been able to get it to work by putting the types like here and referencing this folder from the tsconfig.lib.json. The types folder MUST contain a folder named after your desired typing (eg vimeo), and within the index.d.ts.

There need to be no import statements in your typescript code.

Sadly it appears you have to do this for each application/library that needs the javascript library types.