为角度6添加角度材料时出错

Question

我对角度很新，而且我正在学习角度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

看起来您尝试生成一个新组件，使用add，您可以向依赖项添加库 - （package.json）。尝试 “ng generate component [component name]”（https://github.com/angular/angular-cli/wiki/generate-component）。

你安装了角/ cli吗？要使用ng生成组件，你需要angular / cli。 https://cli.angular.io/

无论如何，你可以看到这个“角度材料介绍和设置”视频https://www.youtube.com/watch?v=u679SQsfRVM

Answer 2

你使用它是错误的，但首先，如果你只是角度学习，没有必要使用角度材料这个想法是误导。

Ng添加

另一个新的CLI命令ng add <package>使您可以轻松地为项目添加新功能。 ng add将使用您的包管理器下载新的依赖项并调用安装脚本（实现为原理图），该脚本可以通过配置更改更新项目，添加其他依赖项（例如polyfill）或scaffold特定于程序包的初始化代码。

ng add命令仅用于依赖关系管理，请检查this。

如果您要尝试生成组件，请按照以下步骤操作：

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

在潜水或至少完成angular.io的英雄之旅教程之前，先了解angular-cli的基本知识。

有关doc，here的完整angular-cli命令用法

Answer 3

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

此错误不是重大错误。

这意味着在您的angular.json文件中，您将“dryRun”作为属性，这是不受支持的。从它的外观来看 “dryRun”属性允许您查看在没有实际编辑文件的情况下执行g时会发生什么。

例如：ng g c ops-components/dividers --project ops-lib --dryRun

删除dryRun属性。