4

I've written an angular library that contains a DailymotionPlayerComponent. The library basically inserts the https://api.dmcdn.net/all.js script into the DOM and then calls DM.player(element, {}) to setup the component. The code is hosted here.

git clone https://github.com/MintPlayer/mintplayer-ng-dailymotion-player
cd mintplayer-ng-dailymotion-player
npm install
npm start -- --open

The typings for my library reside in the /src folder as documented here under the If a library doesn't have typings available... section.

However, when installing the package in a new angular project, the project won't build.

ng new dailymotion-test --routing=false --style=scss --strict
cd dailymotion-test
npm install --save @mintplayer/ng-dailymotion-player
npm install --save @mintplayer/ng-player-progress
code .

Next the code:

Import the DailymotionPlayerModule in the AppModule

app.component.html:

<div class="content">
  <span>ng-dailymotion-player-demo app is running!</span>
  <dailymotion-player [width]="400" [height]="300" #dmplayer></dailymotion-player>
</div>

app.component.ts

export class AppComponent implements AfterViewInit {
  title = 'dailymotiontest';
  
  @ViewChild('dmplayer') dmplayer!: DailymotionPlayerComponent;

  ngAfterViewInit() {
    this.dmplayer.playVideo('x2yhuhb');
  }
}

Run the app:

npm start -- --open

I'm getting the following exception in the console, indicating that the typings reference I've put in my library code has been remapped the wrong way.

Error: node_modules/@mintplayer/ng-dailymotion-player/lib/components/dailymotion-player/dailymotion-player.component.d.ts:1:23 - error TS2688: Cannot find type definition file for 'projects/mintplayer/ng-dailymotion-player/src/typings'.

1 /// <reference types="projects/mintplayer/ng-dailymotion-player/src/typings" />  
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~      


Error: node_modules/@mintplayer/ng-dailymotion-player/lib/components/dailymotion-player/dailymotion-player.component.d.ts:23:31 - error TS2503: Cannot find namespace 
'DM'.

23     stateChange: EventEmitter<DM.PlayerState>;
                                 ~~

Why is this happening? What do I need to change for the library to work in other projects?

EDIT 1

I've already been able to create a similar package for the Youtube player, which works fine and uses the @types/youtube. But since there are no typings for DailyMotion, I want them defined in the same project/repository.

EDIT 2

The DailymotionPlayerComponent contains the following types reference:

/// <reference path="../../../types/dailymotion.d.ts" />

The angular compiler transforms this to:

/// <reference types="projects/mintplayer/ng-dailymotion-player/src/types/dailymotion" />

Causing the project using this library to fail building.

Pieterjan
  • 2,738
  • 4
  • 28
  • 55
  • This topic seems to be similar: https://stackoverflow.com/questions/62494250/including-typings-for-third-party-library-gives-module-not-found-via-angular-cli – Pieterjan Jun 17 '21 at 05:18
  • I tried adding my types-folder to the [typeRoots](https://github.com/MintPlayer/mintplayer-ng-dailymotion-player/blob/a2ab50d1b801f10f17dd33438386e4dbec7a9b9f/projects/mintplayer/ng-dailymotion-player/tsconfig.lib.json#L11) tag of my tsconfig as described [here](https://stackoverflow.com/a/62553247/8941307), but it's still not working – Pieterjan Jun 17 '21 at 07:14
  • Does anyone have a clue? – Pieterjan Jun 19 '21 at 17:29

1 Answers1

1

I had a similar problem with the typing that didn't get exported when trying to build angular libraries.

Could you try to change the daylimotion.d.ts to daylimotion.interface.ts? then do not forget to add the reference into your public-api.ts file as follow

export * from './lib/dailymotion.interface.ts'

I can sadly not explain why angular library isn't able to export a d.ts file but for me it was the workaround.

Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
  • Ah I see. You are simply exposing some interfaces, and this way the types will be known for sure by the consuming application. You're not really exposing typings but simply interfaces (which will not be compiled to javascript). Smart workaround. Thank you for the idea – Pieterjan Jun 21 '21 at 22:44
  • https://github.com/MintPlayer/mintplayer-ng-dailymotion-player/blob/96e14a3180fac2ffb95b71ac4b2372cfc825d476/projects/mintplayer/ng-dailymotion-player/src/lib/interfaces/dailymotion.ts – Pieterjan Jun 21 '21 at 22:45
  • @Pieterjan You're welcome. Well, I couldn't find a better solution yet, if I do I'll update my answer, and if you do, please leave a comment ;) – Raphaël Balet Jun 22 '21 at 05:38