angular - 编译 Angular 4 应用程序时出错 "__webpack_require__"

Question

我刚刚开始学习 Angular 4。我收到以下错误

Uncaught TypeError: Object(...) is not a function
    at eval (bidi.es5.js:70)
    at eval (bidi.es5.js:72)
    at Object../node_modules/@angular/cdk/esm5/bidi.es5.js (vendor.bundle.js:39)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (core.es5.js:57)
    at Object../node_modules/@angular/material/esm5/core.es5.js (vendor.bundle.js:255)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (autocomplete.es5.js:15)
    at Object../node_modules/@angular/material/esm5/autocomplete.es5.js (vendor.bundle.js:191)
    at __webpack_require__ (inline.bundle.js:55)

还有一堆这样的警告

./node_modules/@angular/material/esm5/datepicker.es5.js
107:59-75 "export 'defineInjectable' was not found in '@angular/core'
 @ ./node_modules/@angular/material/esm5/datepicker.es5.js
 @ ./node_modules/@angular/material/esm5/material.es5.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

./node_modules/@angular/cdk/esm5/a11y.es5.js
1118:164-170 "export 'inject' was not found in '@angular/core'
 @ ./node_modules/@angular/cdk/esm5/a11y.es5.js
 @ ./node_modules/@angular/material/esm5/bottom-sheet.es5.js
 @ ./node_modules/@angular/material/esm5/material.es5.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

我认为 Angular Material 有问题。所以我尝试重新安装它。但没有帮助。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule,
  MatCardModule, MatCheckboxModule, MatSelectModule, MatInputModule, MatTabsModule} from '@angular/material';

import { AppComponent } from './app.component';
import { PlayerComponent } from './player/player.component';
import { LoginComponent } from './login/login.component';


@NgModule({
  declarations: [
    AppComponent,
    PlayerComponent,
    LoginComponent,
  ],
  imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule,
      MatCardModule, MatCheckboxModule, MatSelectModule,
      MatInputModule, MatTabsModule,
      HttpClientModule, FormsModule
   ],
  providers: [],
  bootstrap : [AppComponent]
})

export class AppModule { }

我什至不知道如何理解这一点。

----编辑1----

我尝试添加 package.json 作为代码，但不允许我这样做。

Answer 1

package.json 应包含 Angular Material 和 Angular CDK 包的以下条目:

"@angular/cdk": "^5.2.4",
"@angular/material": "^5.2.4"