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

Posted 2023-03-07

技术标签:

【中文标题】我无法在我的项目中使用 Angular 材料 [重复]【英文标题】：I am not able to use Angular material in my project [duplicate] 【发布时间】：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