bugfix> angular-material > 投稿

アンギュラーは本当に初めてで、アンギュラー6を学んでいます しかし、Getting Startedページで言ったようなコンポーネントを追加することはできません

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

助けてください

回答 3 件
  • 新しいコンポーネントを生成しようとしているようですが、 addを使用すると、ライブラリを依存関係に追加できます(package.json)。 試してみる
    「ng generate component [コンポーネント名]」 (https://github.com/angular/angular-cli/wiki/generate-component)。

    angle/cliをインストールしましたか? ng generateコンポーネントを使用するには、angle/cliが必要です。 https://cli.angular.io/

    とにかく、この「Angular Material Introduction&Setup」ビデオを見ることができます https://www.youtube.com/watch?v=u679SQsfRVM

  • あなたはそれを間違って使用していますが、最初に角度でしか学んでいない場合、角度のある材料を使用する必要はありません。この考えは誤解を招きます。

    Ng Add

    Another new CLI command ng add <package>  新しい機能を追加する   プロジェクトに簡単に。 ng addはパッケージマネージャーを使用してダウンロードします   新しい依存関係とインストールスクリプトの呼び出し(   回路図)これは、構成の変更でプロジェクトを更新できます。   追加の依存関係(例:ポリフィル)、または足場   パッケージ固有の初期化コード。

    ng add コマンドは依存関係管理専用です。これを確認してください。

    コンポーネントを生成しようとしている場合は、次のとおりです。

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

    ダイビングまたは少なくとも最後に完了する前に、角度クリの基本を学びますヒーローのツアー angular.ioのチュートリアル。

    ドキュメントからの完全なangle-cliコマンドの使用法については、こちら

  • 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 を削除する  プロパティ。

あなたの答え