Material Sidenav schematic creates build errors

[janpansa]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

ng build should work

What is the current behavior?

ng build fails

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?

Step 1
Created a new angular project e.g.:
ng new angular6test

Step 2
Add matrerial and generate schematic

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

I have added the navigation component in my app.component.html

e.g.

 <navigation>
</navigation>

Step 3
ng build

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

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

This is my package.json

{
"name": "angular6test",
"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.2",
"@angular/cdk": "^6.1.0",
"@angular/common": "^6.0.2",
"@angular/compiler": "^6.0.2",
"@angular/core": "^6.0.2",
"@angular/forms": "^6.0.2",
"@angular/http": "^6.0.2",
"@angular/material": "^6.1.0",
"@angular/platform-browser": "^6.0.2",
"@angular/platform-browser-dynamic": "^6.0.2",
"@angular/router": "^6.0.2",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.2",
"@angular-devkit/build-angular": "~0.6.3",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.3",
"@angular/language-service": "^6.0.2",
"@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"
}
}

Is there anything else we should know?

[chrisvfabio]

Duplicate #11441

[janpansa]

@chrisvfabio I saw that post. I don't get any of those issues, I saw that they released a patch so that there should be no template errors. I beleive the error is with the observer in the component.

I don't have any Unexpected token '?' errors.

I believe the error is in the component class that ithe schematic generates :

isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset).pipe( map(result => result.matches));

result.matches is a Observable<Boolean> where the variable requires a Observable<BreakpointState>

[chrisvfabio]

Yeah, the isHandset$ return type was changed. The following works for me:

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

isHandset$: Observable<BreakpointState> => isHandset$: Observable<boolean>

[janpansa]

@chrisvfabio thanks, yes that seems rather obvious, thanks for pointing that out. I guess it's when they patched it the return type changed. Works 100% when applying the change.

[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.}