angular - Using MatSnackBar in a library

Question

I have an issue with using MatSnackBar from within a library. I have created a simple component which looks like this:

<div class="situ-error-snackbar">
    <span>{{message}}</span>
    <button type="button" mat-icon-button (click)="close()">
        <mat-icon>closer</mat-icon>
    </button>
</div>

The code just looks like this:

import {
  Component,
  Inject,
  Input,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';

import {
  MatSnackBarRef,
  MAT_SNACK_BAR_DATA,
} from '@angular/material/snack-bar';

@Component({
  selector: 'situ-error-snackbar',
  templateUrl: './error-snackbar.component.html',
  styleUrls: ['./error-snackbar.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class ErrorSnackbarComponent implements OnInit {
  @Input() duration: number = 5000;

  public constructor(
    @Inject(MAT_SNACK_BAR_DATA) public message: string,
    public snackBarRef: MatSnackBarRef<ErrorSnackbarComponent>
  ) {}

  public ngOnInit(): void {}

  public close(): void {
    this.snackBarRef.dismiss();
  }
}

And I have a service which invokes it:

public show(notifcation: Notification): void {
  let config: MatSnackBarConfig = {
    panelClass: notifcation.type,
    verticalPosition: 'top',
    duration: 5000,
    data: notifcation.message,
  };

  this.snackBar.openFromComponent(ErrorSnackbarComponent, config);
}

All of this is in a custom library I have been developing. The error-snackbar has a module which looks like this:

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBarModule } from '@angular/material/snack-bar';

import { ErrorSnackbarComponent } from './error-snackbar.component';

@NgModule({
  imports: [MatButtonModule, MatIconModule, MatSnackBarModule],
  declarations: [ErrorSnackbarComponent],
  exports: [ErrorSnackbarComponent],
})
export class ErrorSnackbarModule {}

In my application, I want to display the ErrorSnackbar whenever there is an error, so I added it to the AppComponent as follows:

<router-outlet></router-outlet>

<situ-error-snackbar></situ-error-snackbar>

And I import the library module in app.module like this:

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        CoreModule,
        AppRoutingModule,

        MatAutocompleteModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatSelectModule,

        ErrorSnackbarModule,
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: BearerAuthInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
        { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

In my opinion, this should just work. I have many other components that are in that library and they all work fine. But when I try to run my application in the state above, I get this error:

ERROR NullInjectorError: R3InjectorError(AppModule)[InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData]: NullInjectorError: No provider for InjectionToken MatSnackBarData!

I googled the error and found something similar here: https://github.com/angular/universal-starter/issues/493

So I did what they said and added this to the app.module:

{
    provide: MAT_SNACK_BAR_DATA,
    useValue: {}, // Add any data you wish to test if it is passed/used correctly
},

When I do that, I get a new error:

ERROR NullInjectorError: R3InjectorError(AppModule)[MatSnackBarRef -> MatSnackBarRef -> MatSnackBarRef]: NullInjectorError: No provider for MatSnackBarRef!

So I tried to add another provider like this:

    {
        provide: MatSnackBarRef,
        useClass: MatSnackBarRef,
    },

And now I get a new message:

main.ts:12 Error: Can't resolve all parameters for MatSnackBarRef: (?, ?).

I don't understand why I am having to mess around with providers. Does anyone know what I am doing wrong?

question from:https://stackoverflow.com/questions/65886327/using-matsnackbar-in-a-library

Answer 1

Waitting for answers