我无法在我的项目中使用 Angular 材料 [重复]答案

【问题标题】：I am not able to use Angular material in my project [duplicate]我无法在我的项目中使用 Angular 材料 [重复]
【发布时间】：2019-11-29 01:45:32
【问题描述】：

在使用角度材料时，我遇到以下错误，请帮助我：这些是我在 chrome 浏览器的控制台中遇到的错误

未捕获的类型错误：Object(...) 不是函数
在 platform.es5.js:102
在 Module../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104)
在 webpack_require (bootstrap:78) 在模块../node_modules/@angular/cdk/esm5/a11y.es5.js (a11y.es5.js:1) 在 webpack_require (bootstrap:78) 在 Module../node_modules/@angular/material/esm5/autocomplete.es5.js (autocomplete.es5.js:1) 在 webpack_require (bootstrap:78) 在 Module../node_modules/@angular/material/esm5/material.es5.js (material.es5.js:1) 在 webpack_require (bootstrap:78) 在 Module../src/app/app.module.ts (app.component.ts:8) 客户端：148 [WDS] 编译时的警告。警告@客户端：148 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:55-73 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:56-74 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/datepicker.es5.js 101:59-77 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:57-75 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/paginator.es5.js 80:58-76 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:53-71 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/sort.es5.js 412:59-77 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/stepper.es5.js 61:56-74 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:56-74 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/observers.es5.js 38:65-83 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/observers.es5.js 195:57-75 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 488:55-73 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 1393:62-80 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:58-76 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/core.es5.js 1478:59-77 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2988:54-72 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/platform.es5.js 102:50-68 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/layout.es5.js 88:54-72 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/layout.es5.js 318:60-78 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/collections.es5.js 524:67-85 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:58-76 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2337:55-73 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:63-81 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 826:67-85 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 932:58-76 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:64-82 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 5050:68-86 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:57-75 “在 '@angular/core' 中找不到导出 'ɵɵdefineInjectable' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 488:145-153 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:217-225 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 1393:166-174 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:240-248 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:154-162 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:186-194 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2070:204-212 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:139-147 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:145-153 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:188-196 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:148-156 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:226-234 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:158-166 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2988:142-150 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2988:160-168 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:183-191 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/platform.es5.js 102:130-138 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:203-211 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/layout.es5.js 88:142-150 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:233-241 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/layout.es5.js 318:160-168 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/layout.es5.js 318:184-192 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:260-268 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:171-179 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:154-162 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:172-180 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:167-175 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2337:145-153 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2337:165-173 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 844:187-195 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:169-177 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:197-205 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:222-230 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:240-248 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:148-156 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 826:181-189 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:151-159 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 932:154-162 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:176-184 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:172-180 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:197-205 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:217-225 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 4174:237-245 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/observers.es5.js 195:151-159 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/overlay.es5.js 5050:184-192 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/material/esm5/icon.es5.js 1027:200-208 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:151-159 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154 客户端：154 ./node_modules/@angular/cdk/esm5/a11y.es5.js 2356:206-214 “在 '@angular/core' 中找不到导出 'ɵɵinject' 警告@客户端：154

我尝试使用以下 cli 命令安装 Angular 材质 npm i 角度材料

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 指令中显示登录信息，而不会在控制台中出现任何错误

【问题讨论】：

标签： angular installation node-modules package.json angular-material-6

【解决方案1】：

你不能使用@angular/material 和@angular/cdk 8.1.1 版本，因为你的角度依赖仍然是7.2.0

下载版本 7.2.0

npm install @angular/material@7.2.0.

您还安装了角度材料版本 1，"angular-material": "^1.1.19"，不知道为什么需要这样做

【讨论】：

它无法正常工作并出现同样的错误
我将 v8 替换为 v7.2.0。它就像一个魅力，谢谢！

【解决方案2】：

首先，还原您的更改。

也删除此行：“angular-material”：“^1.1.19”，它适用于 Angular 1，而不是 Angular 2+。

然后安装依赖：npm install

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

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

材料 7 的官方指南： https://v7.material.angular.io/

【讨论】：