title: Error compiling Angular 4 application "__webpack_require__"
body: <p>I have just started to learn Angular 4. I get the following error</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>and a bunch of Warnings like this</p>
  
  <pre><code>./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
  </code></pre>
  
  <p>I believe something is wrong with Angular Material. So I tried reinstalling it. But didn't help.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I don't even know how to make sense of this anymore.</p>
  
  <p><strong>----EDIT 1----</strong></p>
  
  <p>I tried adding package.json as code but SO didn't allow me.</p>
  
  <p><a href="https://i.stack.imgur.com/npkud.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/npkud.png" alt="package.json"></a></p>