使用自己的类型发布 angular 包 - 类型引用包含错误路径

Question

我编写了一个包含 DailymotionPlayerComponent 的 angular 库。该库基本上将 https://api.dmcdn.net/all.js 脚本插入到 DOM 中，然后调用 DM.player(element, {}) 来设置组件。 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

我的图书馆的类型位于 /src 文件夹 as documented here 下的 如果图书馆没有可用的类型... 部分。

但是，在新的 angular 项目中安装包时，项目不会生成。

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 .

下一个代码：

在AppModule

中导入DailymotionPlayerModule

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');
  }
}

运行应用程序：

npm start -- --open

我在控制台中收到以下异常，表明我放入库代码中的类型引用被错误地重新映射。

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>;
                                 ~~

为什么会这样？我需要更改什么才能使库在其他项目中工作？

编辑 1

我已经能够创建一个 similar package for the Youtube player，它工作正常并使用 @types/youtube。但是由于 DailyMotion 没有类型，我希望它们在相同的 project/repository.

中定义

编辑 2

DailymotionPlayerComponent 包含以下类型参考：

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

angular 编译器将其转换为：

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

导致使用该库的项目构建失败。

Answer 1

我在尝试构建 angular 库时遇到了类似的输入问题，但没有导出。

能否尝试将 daylimotion.d.ts 更改为 daylimotion.interface.ts？然后不要忘记将引用添加到您的 public-api.ts 文件中，如下所示

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

遗憾的是，我无法解释为什么 angular 库无法导出 d.ts 文件，但对我来说这是解决方法。

使用自己的类型发布 angular 包 - 类型引用包含错误路径

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

dailymotion-api

typescript-typings

angular

angular-library

编辑 1

编辑 2