Types have separate declarations of a private property

Question

I am learning Angular (which is written in TypeScript) and I stumbled upon this error:

Class 'SnackbarService' incorrectly extends base class 'MatSnackBar'. Types have separate declarations of a private property '_overlay'.

when trying to extend MatSnackBar from @angular/material.

This is my code:

import { MatSnackBar } from '@angular/material'; import { Overlay } from '@angular/cdk/overlay'; import { LiveAnnouncer } from '@angular/cdk/a11y'; ...  export class SnackbarService extends MatSnackBar {    constructor(     private _overlay: Overlay,      private _liveAnnouncer: LiveAnnouncer,     ...   ) {     super(_overlay, _liveAnnouncer, ...);     }   } } 

Any help with any type of explanation on why this happens would be really be appreciated.

Answer 1

This happens because by declaring the constructor as taking a private _overlay parameter, you have created your own _overlay, but that is already defined in the base class MatSnackBar.

Remove the private part from the declaration and inherit it from the base class. Do the same for the other constructor parameters.

export class SnackbarService extends MatSnackBar{    constructor(     _overlay: Overlay,      _liveAnnouncer: LiveAnnouncer,     ...   ) {      super(_overlay, _liveAnnouncer, ...);     }   } } 

You can still access them via this.

Answer 2

This also happens in cases, were dependencies version mistatch. [From typescript perspective]

For example if your app A uses version 1.0 of a package B, and version 1.0 of package C. However package C uses a different version of package B, say 2.0.

Now you have two different classes with same name in overall build process. To resolve it you must get package C upgraded or package B upgraded, so to have same version accross the App.