How to resolve Error: The target entry-point "my-custom-NPM-package" has missing dependencies: - @angular/material/dialog

Question

I have created my first custom NPM package and published it on NPM. When I install my package I get the error:

Error: The target entry-point "ts-idle-timeout" has missing dependencies: - @angular/material/dialog

I read this link and tried to add @angular/material/dialog to package.json but that gave the error:

npm ERR! 400 Bad Request - PUT https://registry.npmjs.org/ts-idle-timeout - "peerDependencies" dep "@angular/material/dialog" is not a valid dependency name.

Below I have added all of what I believe is the relevant code. You will be able to see that my entry component does call a service, which in turn has a dependency on @angular/material/dialog.

I have read some threads that suggest running npm i SOME_MISSING_PACKAGE in the consuming application. I don't think this is necessary for my situation and really want to have a package that "just works" after npm i is run

If I am honest, the whole process of creating an NPM package has not "clicked" for me and I don't understand why I am getting the missing dependencies error. What do I need to add to resolve this?

public-api.ts

export * from './lib/ts-idle/services/idle-timer.service';
export * from './lib/ts-idle/idle/ts-idle.component' ;
export * from './lib/ts-idle/ts-idle.module';

idleTimeout/projects/ts-idle-timeout/package.json

{
  "name": "ts-idle-timeout",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^11.0.9",
    "@angular/core": "^11.0.9",
    "@angular/material": "^11.2.6"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

idleTimeout/package.json

{
  "name": "idle-timeout",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.9",
    "@angular/cdk": "^12.0.1",
    "@angular/common": "~11.0.9",
    "@angular/compiler": "~11.0.9",
    "@angular/core": "~11.0.9",
    "@angular/forms": "~11.0.9",
    "@angular/material": "^12.0.1",
    "@angular/platform-browser": "~11.0.9",
    "@angular/platform-browser-dynamic": "~11.0.9",
    "@angular/router": "~11.0.9",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.7",
    "@angular/cli": "~11.0.7",
    "@angular/compiler-cli": "~11.0.9",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^11.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}   

TsIdleModule

@NgModule({
    declarations: [TsIdleComponent],
    imports: [
        CommonModule,
        MatDialogModule
    ],
    exports: [TsIdleComponent]
})
export class TsIdleModule {
    public static forRoot(config: any): ModuleWithProviders<TsIdleModule> {
        return {
            ngModule: TsIdleModule,
            providers: [
                IdleService,
                { provide: 'config', useValue: config}
            ]
        };
    }
}

TsIdleComponent

...other imports...
import { DialogConfirmService } from '../../dialog/dialog-confirm/services/dialog-confirm.service';
...other imports...

@Component({
  selector: 'ts-idle',
  template: ``
})
export class TsIdleComponent implements OnInit, OnDestroy {

  constructor(
    private _idleService: IdleService,
    private _dialogConfirmService: DialogConfirmService) { }

...other code...
}

DialogConfirmService

import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { DialogConfirmComponent } from '../dialog-confirm.component';
import { DialogConfirmData } from '../models/dialog-confirm.data.model';

@Injectable({
  providedIn: 'root'
})
export class DialogConfirmService {

  constructor(private _dialog: MatDialog) { }

  dialogRef: MatDialogRef<DialogConfirmComponent>;

  public open(data: DialogConfirmData): void {
    this.dialogRef = this._dialog.open(DialogConfirmComponent, {
      data
    });
  }

  public close(): void {
    this.dialogRef.close();
  }

  public confirmed(): Observable<boolean> {
    return this.dialogRef
            .afterClosed()
            .pipe(
              take(1),
              map((res: boolean) => res)
            );
  }
}