Type 'Observable<boolean>' is not assignable to type 'Observable<BreakpointState>'

Question

Using angular-material schematic, I want to generate the navigation menu. For that I use the following command:

ng generate @angular/material:material-nav --name layout

When I serve my application, this error is thrown:

error TS2322: Type 'Observable' is not assignable to type 'Observable'. Type 'boolean' is not assignable to type 'BreakpointState'.

Answer 1

_{Adding an answer just to make this remove from unanswered ones.}

This is a known issue and fixed by this pull request.

Until this PR goes live, you can make changes manually.

__name@dasherize__.component.html

From:

[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"

To:

[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"

---

__name@dasherize__.component.ts

From:

[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"

To:

[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"

From:

isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset)

To:

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)

Answer 2

Just change type of observable to boolean in your typescript file. Match parentheses in your component html file [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"

here is the fix in Green Lines

Here is the main link of fix-https://github.com/angular/material2/pull/11448/commits/20306dbeed3fe7232ffb85ba1d9fd406f6885db2