web-dev-qa-db-ja.com

Angularマテリアルコンポーネントが機能しない

If someone wants to down vote then also add the reason

構成に何かが欠けていますか？事前に感謝を提案してください

ngバージョンコマンド

Versions
Angular CLI: 1.7.0
Node: 8.1.1
OS: win32 x64
Angular: 5.2.5
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/animations: 5.2.9
@angular/cdk: 5.2.4
@angular/cli: 1.7.0
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
TypeScript: 2.5.3
webpack-bundle-analyzer: 2.11.1
webpack: 3.11.0

再現手順

ステップ1新しい任意の名前で新しいプロジェクトを作成しますステップ2 https://material.angular.io/guide/getting-started の手順に従います。

npm install --save @angular/material @angular/cdk
    npm install --save @angular/animations

ステップ3

Material.module.ts

import {MatButtonModule,
        MatCheckboxModule} from '@angular/material';
 @NgModule({
   imports: [MatButtonModule, MatCheckboxModule],
 })
 export class MaterialModule { }

app.component.html

<div>
  <input type="button" mat-button placeholder="Holla!">

  <button mat-raised-button >Click me!</button>
  <mat-checkbox>Check me!</mat-checkbox>
</div>

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import {MaterialModule} from '../shared/material.module'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.css

/ *このファイルにグローバルスタイルを追加したり、他のスタイルファイルをインポートしたりできます* /

@import "~@angular/material/prebuilt-themes/Indigo-pink.css";

観察された行動

不思議なエラー：テンプレート解析エラー：「mat-checkbox」は既知の要素ではありません：1。「mat-checkbox」がAngularコンポーネントの場合、それがこのモジュールの一部です。2。「mat-checkbox」がWebコンポーネントの場合、このメッセージを抑制するために、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加します。（ "

  <button mat-raised-button >Click me!</button>
  [ERROR ->]<mat-checkbox>Check me!</mat-checkbox>
</div>"): ng:///AppModule/AppComponent.html@4:2
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)
syntaxError @ compiler.js:485
TemplateParser.parse @ compiler.js:24668
JitCompiler._parseTemplate @ compiler.js:34621
JitCompiler._compileTemplate @ compiler.js:34596
(anonymous) @ compiler.js:34497
JitCompiler._compileComponents @ compiler.js:34497
(anonymous) @ compiler.js:34367
then @ compiler.js:474
JitCompiler._compileModuleAndComponents @ compiler.js:34366
JitCompiler.compileModuleAsync @ compiler.js:34260
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5567
(anonymous) @ main.ts:11
./src/main.ts @ main.bundle.js:59
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:75
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

`` `

望ましい行動

何を実装してもらいたいですか？ angularマテリアルコンポーネントをロードする必要があります

役立つ可能性のあるその他の詳細に言及します（オプション）

Package.json

{
  "name": "mat-learn",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "TypeScript": "~2.5.3"
  }
}

Main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'hammerjs';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
javascriptangulartypescriptangular-materialangular-cli
3
harsh

ここに示す例のように、共有materialモジュールからマテリアルモジュールをエクスポートする必要もあります。

https://material.angular.io/guide/getting-started#step-3-import-the-component-modules

import {MatButtonModule,
        MatCheckboxModule} from '@angular/material';
 @NgModule({
   imports: [MatButtonModule, MatCheckboxModule],
   exports: [MatButtonModule, MatCheckboxModule]
 })
 export class MaterialModule { }
5
David

@ import "~@angular/material/prebuilt-themes/Indigo-pink.css";
これをstyle.cssに追加します

3
chirag sorathiya