编译Angular 4应用程序时出错＆＃34; __ webpack_require __＆＃34;

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作为代码，但SO不允许我。

Answer 1

<link rel="stylesheet" href="./css/custom.css">应该有Angular Material和Angular CDK包的以下条目：

package.json

Answer 2

在package.json中检查@ angular / cdk＆material的版本 如果您看到的版本高于5.2.4并且使用的是Angle 5，请尝试使用这些命令将其降级
=> npm卸载@ angular / material --save
然后
=> npm install @ angular / material @ 5.2.4 --save
对于CDK使用：
=> npm卸载@ angular / cdk --save
然后
=> npm install @ angular / cdk @ 5.2.4 --save

希望它对您有用：）