Ошибка добавления углового материала для угловых 6

Question

Я действительно новичок в angular, и я изучаю angular 6, но я не могу добавить компонент, как сказано на странице "Начало работы", через

ng add component heroes

, и что-то не так происходит, ошибка:

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).

когда я прибегнул к гуглу, кто-то сказал, что это можно исправить, добавив угловой материал, поэтому я начинаю установку углового материала, но ошибка моего приложения - это журнал консоли:

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

пожалуйста, помогите мне, ребята

Answer 1

Вы используете это неправильно, но, во-первых, если вы изучаете только с угловым, нет необходимости использовать угловой материал, эта идея вводит в заблуждение.

Ng Добавить

Еще одна новая команда CLI ng add <package> упрощает добавление новых возможностей в ваш проект.ng add будет использовать менеджер пакетов для загрузки новых зависимостей и вызова сценария установки (реализованного в виде схемы), который может обновлять ваш проект с изменениями конфигурации, добавлять дополнительные зависимости (например, полифилы) или код инициализации, специфичный для пакета scaffold.

ng add Команда только для управления зависимостями, проверьте this out.

Если вы пытаетесь создать компонент, выполните следующее:

ng generate component my-new-component
ng g component my-new-component # using the alias

Изучите основы angular-cli перед погружением или, по крайней мере, завершите урок tour-of-heros из angular.io .

Дляполное использование команды angular-cli из документа, здесь

Answer 2

Data path "" should NOT have additional properties(dryRun).

Эта ошибка не является существенной ошибкой.

Это означает, что в вашем файле angular.json имеется свойство "dryRun", которое не поддерживается.Похоже, его
Свойство «dryRun» позволяет вам видеть, что произойдет, если вы выполните ng g без фактического редактирования файлов.

Например: ng g c ops-components/dividers --project ops-lib --dryRun

Удалите свойство dryRun.

Answer 3

Похоже, вы пытаетесь сгенерировать новый компонент, с помощью add вы можете добавлять библиотеки в свои зависимости - (package.json).try
"ng generate component [имя компонента]" (https://github.com/angular/angular-cli/wiki/generate-component).

Вы установили angular / cli? чтобы использовать ng generate компонент, который вам нужен angular / cli. https://cli.angular.io/

в любом случае вы можете посмотреть это видео "Угловое введение и настройка материала" https://www.youtube.com/watch?v=u679SQsfRVM