angulartypescript-typingsangular-librarydailymotion-api

Publish angular package with own typings - types reference contains wrong path

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.

Solution

  • 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.