How to add MatButton into an Angular library (Angular 9) [closed]

Question

I generated a library on a fresh angular 9 project with the command

ng g library multi-select

Now I want to add Angular Material's MatButton so I added 'MatButtonModule' to the library's main module. I also added, "@angular/material": "^9.0.0" in the library's package.json as a dependancy and also whitelisted this in the ng-package.json. When I try to build the library (ng build multi-select) it says

Compiling TypeScript sources through ngc
ERROR: node_modules/@angular/material/button/button.d.ts:22:22 - error NG6002: Appears in the NgModule.imports of MultiSelectModule, but could not be resolved to an NgModule class

22 export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
                        ~~~~~~~~~
node_modules/@angular/material/button/button.d.ts:22:22 - error NG6003: Appears in the NgModule.exports of MultiSelectModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

22 export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
                        ~~~~~~~~~

An unhandled exception occurred: node_modules/@angular/material/button/button.d.ts:22:22 - error NG6002: Appears in the NgModule.imports of MultiSelectModule, but could not be resolved to an NgModule class

22 export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
                        ~~~~~~~~~
node_modules/@angular/material/button/button.d.ts:22:22 - error NG6003: Appears in the NgModule.exports of MultiSelectModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

22 export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {

This is how the multi-select Module Looks

import { NgModule } from '@angular/core';
import { MultiSelectComponent } from './multi-select.component';
import { MatButton } from '@angular/material/button';
import { FormsModule  } from '@angular/forms';
import { SearchPipe } from './search.pipe';

@NgModule({
      declarations: [MultiSelectComponent, SearchPipe],
      imports: [
        MatButton,
        FormsModule
      ],
      exports: []
    })
 export class MultiSelectModule { }

It goes without saying that the library builds fine without this module. What seems to be the problem with this?

Answer 1

In the module of MultiSelectModule, you are importing MatButton. You should import it's module, MatButtonModule.

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  // ...
  imports: [ MatButtonModule ],
  // ...
})
export class MultiSelectModule {}