角材料组件不起作用

Question

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

第三步

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";

观察到的行为

Compiler.js：485未捕获的错误：模板解析错误：'mat-checkbox'不是已知元素：1.如果'mat-checkbox'是Angular组件，则请验证它是否属于此模块。2.如果“ mat-checkbox”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。（“

  <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

```

期望的行为

希望看到实施什么？它应该加载角形材料组件

提及可能有用的任何其他详细信息（可选）

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"
  }
}

维护

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

Answer 1

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
在 style.css 中添加这个

Answer 2

按照此处给出的示例，您还需要从共享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 { }