Angular 8.0.1 platform.es5.js：102未捕获的TypeError：Object（...）不是函数

时间：2019-06-25 18:19:16

标签： angular angular-material

我正在学习在线均值堆栈教程，在尝试实现角度材料（特别是输入模块）后遇到了一些问题

我在chrome浏览器控制台中收到此错误消息：

Uncaught TypeError: Object(...) is not a function
    at platform.es5.js:102
    at Object../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@angular/cdk/esm5/a11y.es5.js (a11y.es5.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@angular/material/esm5/autocomplete.es5.js (autocomplete.es5.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@angular/material/esm5/material.es5.js (material.es5.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/app.module.ts (app.component.ts:8)

我也收到了大量错误消息，但是包括所有错误消息使我超出了字符数限制，因此这里有一些内容：

client?b8a4:126 [WDS] Warnings while compiling.
warnings @ client?b8a4:126
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/material/esm5/datepicker.es5.js
101:59-77 "export 'ɵɵdefineInjectable' was not found in '@angular/core'
warnings @ client?b8a4:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/material/esm5/icon.es5.js
1027:151-159 "export 'ɵɵinject' was not found in '@angular/core'
warnings @ client?b8a4:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/material/esm5/icon.es5.js
1027:176-184 "export 'ɵɵinject' was not found in '@angular/core'
warnings @ client?b8a4:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/material/esm5/icon.es5.js
1027:200-208 "export 'ɵɵinject' was not found in '@angular/core'
warnings @ client?b8a4:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/material/esm5/icon.es5.js
1027:57-75 "export 'ɵɵdefineInjectable' was not found in '@angular/core'
warnings @ client?b8a4:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/cdk/esm5/platform.es5.js
102:130-138 "export 'ɵɵinject' was not found in '@angular/core'
warnings @ client?b8a4:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/cdk/esm5/platform.es5.js
102:50-68 "export 'ɵɵdefineInjectable' was not found in '@angular/core'
warnings @ client?b8a4:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?b8a4:135 ./node_modules/@angular/material/esm5/snack-bar.es5.js
1049:139-147 "export 'ɵɵinject' was not found in '@angular/core'

这是我的package.json：

{
  "name": "mean2",
  "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": "^6.1.0",
    "@angular/cdk": "~8.0.1",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material';

import { AppComponent } from './app.component';
import { PostCreateComponent}  from './posts/post-create/post-create.component';


@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的app.component.ts文件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'mean2';
}

我也有一个组成部分。

这是ts文件：

import { Component } from "@angular/core";

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html'
})
export class PostCreateComponent {
  newPost = 'NO CONTENT';
  enteredValue = '';

  onAddPost() {
    this.newPost = this.enteredValue;
  }
}

在这里找到html文件：

<textarea matInput rows='6' [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="onAddPost()">Save Post</button>
<p>{{ newPost }}</p>

我看到另一则帖子问的是基本相同的问题，但发帖人使用的是不同版本的angular，所以我不知道答案是否仍然适用。

1 个答案:

答案 0 :(得分：0)

像这样更新您的资料：-

npm install --save @angular/material@6.4.7 @angular/cdk@6.4.7 @angular/animations@6.1.0
相关问题
最新问题