angularyoutube-iframe-apiangular-library

angular library: automatically install @types/youtube along


I created an angular library (node package) that provides a youtube player.

The project containing the library also contains a test project that works as expected. The package for my library contains the peerDependency @types/youtube, which is needed for typescript autocompletion. To see the test project working:

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

The angular app in the same repository is working fine

I now tried creating a new angular app to test the library.

ng new YoutubeTest --routing=false --style=scss
cd YoutubeTest
npm install --save @mintplayer/ng-youtube-player

Then you can implement it in the project

app.module.ts (Add the YoutubePlayerModule)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { YoutubePlayerModule } from '@mintplayer/ng-youtube-player';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    YoutubePlayerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<youtube-player [domId]="'player1'" #player1></youtube-player>

app.component.ts

export class AppComponent implements AfterViewInit {
  title = 'youtube-test';
  @ViewChild('player1') player1!: YoutubePlayerComponent;
  
  ngAfterViewInit() {
    this.player1.playVideoById('yFKhgF_vkgs');
  }
}

But when you run the project (npm start -- --open) you'll get errors in the console because @types/youtube is not installed. I already tried including @types/youtube as devDependency, the @types/youtube package is not installed after running npm install or even npm install --dev. This seems to have been an adaptation by npm in the past. I also tried as normal dependency, but then angular tells you that you'd have to explicitly allow this.

Can I include @types/youtube as a dependency (or better devDependency) in my library so that the consuming application developer does not have to install it manually? Or is it supposed to be like this?

npm install --save @example/ng-youtube-player
npm install --save-dev @types/youtube

Solution

  • Apparently npm i xxxxxx installs the peerDependencies along...