我无法在我的项目中使用 Angular material

Question

在使用 angular material 时出现以下错误，请帮助我：这些是我在 chrome 浏览器

的控制台中遇到的错误

Uncaught TypeError: Object(...) is not a function
at platform.es5.js:102
at Module../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104)
at webpack_require (bootstrap:78) at Module../node_modules/@angular/cdk/esm5/a11y.es5.js (a11y.es5.js:1) at webpack_require (bootstrap:78) at Module../node_modules/@angular/material/esm5/autocomplete.es5.js (autocomplete.es5.js:1) at webpack_require (bootstrap:78) at Module../node_modules/@angular/material/esm5/material.es5.js (material.es5.js:1) at webpack_require (bootstrap:78) at Module../src/app/app.module.ts (app.component.ts:8) client:148 [WDS] Warnings while compiling. warnings @ client:148 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:55-73 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:56-74 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/datepicker.es5.js 101:59-77 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:57-75 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/paginator.es5.js 80:58-76 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:53-71 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/sort.es5.js 412:59-77 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/stepper.es5.js 61:56-74 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:56-74 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/observers.es5.js 38:65-83 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/observers.es5.js 195:57-75 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 488:55-73 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 1393:62-80 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:58-76 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/core.es5.js 1478:59-77 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2988:54-72 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/platform.es5.js 102:50-68 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/layout.es5.js 88:54-72 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/layout.es5.js 318:60-78 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/collections.es5.js 524:67-85 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:58-76 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2337:55-73 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:63-81 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 826:67-85 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 932:58-76 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:64-82 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 5050:68-86 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:57-75 "export 'ɵɵdefineInjectable' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 488:145-153 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:217-225 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 1393:166-174 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:240-248 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:154-162 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:186-194 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:204-212 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:139-147 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:145-153 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:188-196 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:148-156 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:226-234 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:158-166 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2988:142-150 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2988:160-168 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:183-191 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/platform.es5.js 102:130-138 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:203-211 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/layout.es5.js 88:142-150 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:233-241 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/layout.es5.js 318:160-168 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/layout.es5.js 318:184-192 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:260-268 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:171-179 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:154-162 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:172-180 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:167-175 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2337:145-153 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2337:165-173 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:187-195 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:169-177 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:197-205 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:222-230 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:240-248 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:148-156 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 826:181-189 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:151-159 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 932:154-162 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:176-184 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:172-180 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:197-205 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:217-225 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:237-245 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/observers.es5.js 195:151-159 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 5050:184-192 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:200-208 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:151-159 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154 client:154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:206-214 "export 'ɵɵinject' was not found in '@angular/core' warnings @ client:154

我尝试使用以下 cli 命令安装 angular material npm i angular-material

package.json

{
  "name": "shop-managment",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^8.1.1",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^8.1.1",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "angular-material": "^1.1.19",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.12.0",
    "@angular/cli": "~7.3.5",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  },
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.5.",
  "main": "index.js",
  "author": "",
  "license": "ISC"
}

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatToolbarModule,MatButtonModule,MatSidenavModule,MatIconModule,MatListModule,MatCardModule} from '@angular/material';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


login.ts(my component where i used angular material)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

login.html

<mat-card>Login</mat-card>

我希望在 mat-card 指令中显示登录而不会在控制台中出现任何错误

Answer 1

您不能使用@angular/material 和@angular/cdk 版本 8.1.1，因为您的 angular 依赖项仍在 7.2.0

下载7.2.0版本

npm install @angular/material@7.2.0.

您还安装了 angular material 版本 1，"angular-material": "^1.1.19"，不确定为什么需要这样做

Answer 2

首先，还原您的更改。

也删除这一行："angular-material": "^1.1.19", 它适用于 Angular 1，而不是 Angular 2+。

然后安装依赖项：npm install

运行命令：ng add @angular/material@^7.3.7

当它询问您是否添加 hammer.js 和动画模块时，请说 'y'。

material7 的官方指南： https://v7.material.angular.io/

我无法在我的项目中使用 Angular material

I am not able to use Angular material in my project

installation

node-modules

package.json

angular

angular-material-6