javascript - 如何修复 Angular Material Components 的构建错误？

Question

我是否在配置中遗漏了什么？

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 步创建新项目 ng new any-name 第 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>

应用程序模块.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 { }

样式.css

/* You can add global styles to this file, and also import other style files */
@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”以禁止显示此消息。 ("

   点我! [错误 ->]检查我!

   "): ng:///AppModule/AppComponent.html@4:2 在 syntaxError (compiler.js:485) 在 TemplateParser.parse (compiler.js:24668) 在 JitCompiler._parseTemplate (compiler.js:34621) 在 JitCompiler._compileTemplate (compiler.js:34596) 在 eval (compiler.js:34497) 在 Set.forEach() 在 JitCompiler._compileComponents (compiler.js:34497) 在 eval (compiler.js:34367) 在 Object.then (compiler.js:474) 在 JitCompiler._compileModuleAndComponents (compiler.js:34366) syntaxError @ compiler.js:485 TemplateParser.parse @ compiler.js:24668 JitCompiler._parseTemplate @ compiler.js:34621 JitCompiler._compileTemplate @ compiler.js:34596 (匿名)@ compiler.js:34497 JitCompiler._compileComponents @ compiler.js:34497 (匿名)@ compiler.js:34367 然后@compiler.js:474 JitCompiler._compileModuleAndComponents @ compiler.js:34366 JitCompiler.compileModuleAsync @ compiler.js:34260 CompilerImpl.compileModuleAsync @ platform-b​​rowser-dynamic.js:239 PlatformRef.bootstrapModule @ core.js:5567 (匿名)@ 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 (匿名)@ main.bundle.js:1

期望的行为

希望看到什么实现？ 它应该加载 Angular Material 组件。

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

主要.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));

Answer 1

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