Failed to create Navigation Schematic

[abhiindian]

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' is not assignable to type 'Observable'.
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"
  }
}

[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

[rafaelss95]

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

[juristr]

@rafaelss95 perfect. Did search for the issue but couldn't find it.

However the overlay issue still exists, don't you think? IMHO it should expand the entire page

[sudhaparayil]

I am faceing the same issue..and solve it
https://github.com/sudhaparayil/Angular-Material-angular6

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavigationComponent } from './components/dashboard/navigation.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
const appRoutes: Routes = [
  { path: '', component: NavigationComponent },

];
@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent 
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes),
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

navigation.component.html

  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches">

package.json

{
  "name": "angular",
  "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"
  }
}

[amcdnl]

Addressed the height issue in #11191 ... otherwise looks good on 6.2.0

[Splaktar]

Fixed in 6.2.0 via b9041e3.
Overlay issue fixed in 6.3.0 via 6bd2775.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}