NullInjectorError: No provider for MatBottomSheetRef

Issue

In this stackblitz I'm getting the following error (Even though the MatBottomSheetModule is imported):

        ERROR
        Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        StaticInjectorError(Platform: core)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        NullInjectorError: No provider for MatBottomSheetRef!

Thoughts?

Angular / Components Feature Request

If you agrre you can vote for this. I requested making the use case symmetrical WRT how we make use of other similar Angular components / services.

https://github.com/angular/components/issues/17011

Solution

You need providers for Bottom Sheet which you were missing.

Make these changes to material.module.ts

import {MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA} from '@angular/material/bottom-sheet';

@NgModule({
  exports: [...]
  providers: [
    { provide: MatBottomSheetRef, useValue: {} },
    { provide: MAT_BOTTOM_SHEET_DATA, useValue: {} }
  ],
})

This is the recommended approach for Treeshaking for webpack for more performant and minimized bundles:

In file: country-code-select.component.ts

// Removed -1
// import { MatBottomSheetRef } from '@angular/material'; 


//Added +1
import { MatBottomSheetRef} from '@angular/material/bottom-sheet';  

The Stackblitz for your reference

https://stackblitz.com/edit/angular-material-baseline2-country-code-select-6hisdk

And you are set. Cheers!

Answered By - joyBlanks