Error adding angular material for angular 6 - angular-material

Question

I'm really new to angular, and I'm learning angular 6
but I can't add a component like said by Getting Started page via
ng add component heroes
and something wrong happen, the error is:
Schematic input does not validate against the Schema: {"dryRun":false,"inlineStyle":false,"
inlineTemplate":false,"changeDetection":"Default","styleext":"css","spec":true,"flat":false
,"skipImport":false,"export":false}
Errors:
Data path "" should NOT have additional properties(dryRun).
when I googled it someone said it can be fixed by adding angular material, so I begin installing angular material, but My application error
this is the console log:
compiler.js:215 Uncaught Error: Template parse errors:
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("
class="sidenav"
fixedInViewport="true"
[ERROR ->][attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : "): ng:///AppModule/MyMenuComponent.html#5:4
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("
fixedInViewport="true"
[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[ERROR ->][mode]="isHandset$ | async ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar "): ng:///AppModule/MyMenuComponent.html#6:4
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'over' : 'side'] in ng:///AppModule/MyMenuComponent.html#6:4 ("
fixedInViewport="true"
[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[ERROR ->][mode]="isHandset$ | async ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar "): ng:///AppModule/MyMenuComponent.html#6:4
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"
[ERROR ->][opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-li"): ng:///AppModule/MyMenuComponent.html#7:4
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'over' : 'side'] in ng:///AppModule/MyMenuComponent.html#6:4 ("isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"
[ERROR ->][opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-li"): ng:///AppModule/MyMenuComponent.html#7:4
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'over' : 'side'] in ng:///AppModule/MyMenuComponent.html#6:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'over' : 'side'] in ng:///AppModule/MyMenuComponent.html#6:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'over' : 'side'] in ng:///AppModule/MyMenuComponent.html#6:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'over' : 'side'] in ng:///AppModule/MyMenuComponent.html#6:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/MyMenuComponent.html#5:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
#drawer
class="sidenav"
"): ng:///AppModule/MyMenuComponent.html#1:2, Directive MatSidenav
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'over' : 'side'] in ng:///AppModule/MyMenuComponent.html#6:4 ("<mat-sidenav-container class="sidenav-container">
[ERROR ->]<mat-sidenav
compiler.js:215)
at TemplateParser.push../node_modules/#angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
at compiler.js:22639
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
at compiler.js:22549
at Object.then (compiler.js:206)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
syntaxError # compiler.js:215
push../node_modules/#angular/compiler/fesm5/compiler.js.TemplateParser.parse # compiler.js:14702
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate # compiler.js:22709
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate # compiler.js:22696
(anonymous) # compiler.js:22639
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents # compiler.js:22639
(anonymous) # compiler.js:22549
then # compiler.js:206
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents # compiler.js:22548
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync # compiler.js:22508
push../node_modules/#angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync # platform-browser-dynamic.js:143
push../node_modules/#angular/core/fesm5/core.js.PlatformRef.bootstrapModule # core.js:4790
./src/main.ts # main.ts:11
__webpack_require__ # bootstrap:81
0 # main.ts:12
__webpack_require__ # bootstrap:81
checkDeferredModules # bootstrap:43
webpackJsonpCallback # bootstrap:30
(anonymous) # main.js:1
contentScript.js:86 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
getIp # contentScript.js:86
countData # contentScript.js:91
(anonymous) # contentScript.js:188
please help me guys

Answer 1

It looks like you try to generate a new component,
with add, you can add libraries to your dependencies-(package.json).
try
"ng generate component [component name]"
(https://github.com/angular/angular-cli/wiki/generate-component).
Did you install angular/cli?
to use ng generate component you need angular/cli.
https://cli.angular.io/
anyway you can watch this "Angular Material Introduction & Setup" video
https://www.youtube.com/watch?v=u679SQsfRVM

Answer 2

You are using it wrong, But first if you are only learning with angular there is no need to use angular material this idea is misleading.
Ng Add
Another new CLI command ng add <package> makes adding new capabilities
to your project easy. ng add will use your package manager to download
new dependencies and invoke an installation script (implemented as a
schematic) which can update your project with configuration changes,
add additional dependencies (e.g. polyfills), or scaffold
package-specific initialization code.
ng add command is only for dependency management, check this out.
If you are trying to genererate a component follow this:
ng generate component my-new-component
ng g component my-new-component # using the alias
Learn the basic of angular-cli before diving or atleast complete the tour-of-heroes tutorial from angular.io.
For complete angular-cli command usage from the doc, here

Answer 3

Data path "" should NOT have additional properties(dryRun).
This error isn't a material error.
This means that in your angular.json file you have "dryRun" as a property, which is not supported. By the looks of it its
The "dryRun" property allows you to see what would happen when you do ng g without actually editing files.
For example: ng g c ops-components/dividers --project ops-lib --dryRun
Remove the dryRun property.