Angular Material Project 无法在 Angular 4 中编译

Question

我正在尝试编译我的 Angular 4 项目。我已经从“https://material.angular.io/guide/getting-started”安装了 Angular Material，并将依赖项包含在 app.module.ts 中。当我尝试编译该项目时，收到了下面提到的警告和错误：

ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject<T>' incorrectly e
xtends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<
R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,10): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Directionality'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,26): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DIRECTIONALITY_PROVI
DER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,51): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DIR_DOCUMENT'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,65): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Direction'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,76): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Dir'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,81): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BidiModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,10): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,18): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PortalHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,30): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BasePortalHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,46): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ComponentPortal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,63): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'TemplatePortal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Templa
tePortalDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,35): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal
HostDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,56): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal
Module'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/dom-portal-host.d.ts
(8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DomPorta
lHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/platform.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Platform'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/features.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'getSupportedI
nputTypes'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/index.d.ts (8,10):
Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PlatformModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'AriaLivePol
iteness'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
30): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOUN
CER_ELEMENT_TOKEN'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
60): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LiveAnnounc
er'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
75): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOUN
CER_PROVIDER_FACTORY'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
108): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOU
NCER_PROVIDER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,10):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrap'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,21):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapFactor
y'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,39):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapDeprec
atedDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,69):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapDirect
ive'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/interactivity-checker.d
.ts (8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Inte
ractivityChecker'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/fake-mousedown.d.ts (8,
10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'isFakeMouse
downFromScreenReader'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/index.d.ts (8,10): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'A11yModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'UP_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,20
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DOWN_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,32
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'RIGHT_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,45
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LEFT_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,57
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PAGE_UP'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,66
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PAGE_DOWN'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,77
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'HOME'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,83
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'END'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,88
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ENTER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,95
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'SPACE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
2): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'TAB'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
7): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ESCAPE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,11
5): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BACKSPACE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,12
6): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DELETE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,10): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'coerceBooleanProperty'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,33): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'coerceNumberProperty'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,55): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ObserveContentModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,77): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ObserveContent'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/list-key-manager.d.ts (
8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CanDisabl
e'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/list-key-manager.d.ts (
8,22): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ListKeyMa
nager'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/sort/sort-header.d.ts (11,10): Mo
dule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkColumnDef'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,10): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkCell'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,19): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkColumnDef'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,33): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkHeaderCell'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/table.d.ts (1,10): Module '
"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkTable'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/row.d.ts (1,10): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkHeaderRow'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/row.d.ts (1,24): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkRow'.
ERROR in BidiModule is not an NgModule

我的 Package.JSON 如下所示：

{
  "name": "client",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/cli": "^1.3.2",
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/compiler-cli": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/platform-server": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "latest-version": "^3.1.0",
    "ng2-materialize": "^1.3.2",
    "popper.js": "^1.12.3",
    "rxjs": "^6.0.0-alpha.0",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.4.2",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0"
  }
}

这就是 app.module.ts 的样子：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from "@angular/router";
import { NavbarComponent } from './components/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import { MaterialModule } from '@angular/material';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule } from '@angular/material';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    DashboardComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ReactiveFormsModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,MdButtonModule,
    MdMenuModule,
    MdCardModule,
    MdToolbarModule,
    MdIconModule


    // MdInputModule, 
    // MdButtonModule,

    // RouterModule.forRoot([
    //   {path:'home', component:HomeComponent},
    //   {path:'dashboard', component:DashboardComponent}

    // ])
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我遇到了这个问题 - 我仍在寻找答案。

此外，上面的最新评论（8 月 29 日）声明不要将 cdk-builds 与最新材料混合使用 - 该声明与 Material 网站本身存在直接冲突。安装说明声明包括两者：

https://material.angular.io/guide/getting-started

npm install --save angular/material2-builds angular/cdk-builds

请说明我们应该偏离材料团队明确说明的说明的原因。

谢谢

Answer 2

我遇到了这个问题，我尝试将@angular/cdk 和@angular/material 安装为相同的版本。问题已解决。

Answer 3

在你的窗口中安装 Angular 4

1. 从 nodejs 站点安装 Node js 安装程序下载 - 运行环境。并使用以下命令检查您的计算机上是否安装了节点：node -v
2. 安装从 git 站点下载的 Git Bash 安装程序。
3. 然后使用以下命令安装 CLI：npm install -g @angular/cli
4. 然后在任意驱动器中创建一个文件夹
5. 打开 git bash 命令提示符并使用 : cd foldername 移动到创建的文件夹
6. 现在使用以下命令在该文件夹中创建一个新项目：ng new projectname 并使用以下命令移动到该文件夹​​：cd projectname
7. 现在使用以下命令检查安装的 Angular 版本：ng -v
8. 现在可以看到安装了angular 2，可以运行以下命令升级到angular4 仅适用于 Windows： npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-b​​rowser @next @angular/platform-b​​rowser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

或者你可以去这个 url 找到安装 RC.1 然后复制命令 https://github.com/angular/angular/blob/master/CHANGELOG.md

9. 还要确保您有 Typescript 2.1.6 或更高版本，如果没有，则使用此命令更新 typescript：npm install typescript@2.2.1 --save

10. 然后再次使用此命令检查角度版本：ng -v 将显示角度版本 4

11. 使用以下命令安装 NPM angular core：npm install -g @angular/core
12. 使用此命令安装 typescript 文件夹之后：npm install -g typescript
13. 现在您可以使用以下命令检查 NPM 版本：npm -v
14. 现在您可以使用以下命令运行 Angular 4 项目：ng serve

Answer 4

1. 将所有导入的前缀从 MdButtonModule 更改为 MatButtonModule。 剩下的应该是这样的：

import { MatCheckboxModule, MatAutocompleteModule, MatSlideToggleModule、MatButtonModule、MatFormFieldControl、 MatIconModule, MatInputModule, MatSelectModule, MatSortModule, MatDatepickerModule, DateAdapter, MatChipsModule} from '@angular/material';