Failed to create Navigation Schematic

Bug:

Failed to create Navigation Schematic using Angular CLI and causing error while running Angular application using ng serve.

What is the expected behavior?

The navigation schematic should be displayed while running or building angular application using ng serve or ng build

What is the current behavior?

Thowing exception on ng serve.

ERROR in src/app/navigation/navigation.component.ts(13,3): error TS2322: Type ‘Observable<boolean>’ is not assignable to type ‘Observable<BreakpointState>’. Type ‘boolean’ is not assignable to type ‘BreakpointState’

What are the steps to reproduce?

ng new Blog

cd Blog

ng add @angular/material

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

remove all html code from app.component.html and add <navigation></navigation>.

What is the use-case or motivation for changing an existing behavior?

Create Angular Material Navigation using Angular CLI.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

{
  "name": "blog",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26",
    "@angular/cdk": "^6.1.0"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.5",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.5",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

[rafaelss95]

Duplicate of #11441 and #11445… also it’s already fixed by #11448.

[juristr]

Yep, just found the same (fresh install of a new project with the latest Angular CLI)

In the component, it should be like this:

export class ShellComponent {
  isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(map(result => result.matches));

  constructor(private breakpointObserver: BreakpointObserver) {}
}

Moreover, in the according template, the async needs to be wrapped with ( ... ) like

[mode]="(isHandset$ | async) ? 'over' : 'side'" ...>

After that, the app should be running. However, there’s another issue. The overlay doesn’t expand over the entire page, but rather just keeps being over the toolbar and content you added:

This leads to the strange behavior that the side-nav obviously just closes when you click exactly on that toolbar where the overlay is. I’d change this behaviour to stretch to the entire page