Error compiling Angular 4 application "__webpack_require__"

Question

I have just started to learn Angular 4. I get the following error

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)

and a bunch of Warnings like this

./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

I believe something is wrong with Angular Material. So I tried reinstalling it. But didn't help.

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 { }

I don't even know how to make sense of this anymore.

----EDIT 1----

I tried adding package.json as code but SO didn't allow me.

@OmurbekKadyrbekov I have added package.json as a image in the edit. — amitection
– amitection, Commented Mar 22, 2018 at 11:32

Edric · Accepted Answer · 2018-03-24 05:10:57Z

6

The package.json should have the following entries for Angular Material and the Angular CDK packages:

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

edited Mar 24, 2018 at 5:10

Edric

27.2k13 gold badges88 silver badges97 bronze badges

answered Mar 22, 2018 at 12:24

p4r1

2,6701 gold badge20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amitection Over a year ago

So should I replace the existing entries for @angular/cdk and @angular/material in dependencies with this one?

p4r1 Over a year ago

Correct, then reinstall the dependencies with an npm install.

Edric Over a year ago

@p4r1 That syntax will only make npm install only that version itself. Consider adding a caret to the version to make it install versions 5.x.x.

Said El-Ghamri · Accepted Answer · 2018-07-12 00:13:53Z

2

check the version of @angular/cdk&material in your package.json if you see a version above 5.2.4 and you're using angular 5 try to downgrade it using those commandes
=> npm uninstall @angular/material --save
then
=> npm install @angular/[email protected] --save
and for CDK use :
=> npm uninstall @angular/cdk --save
then
=> npm install @angular/[email protected] --save

hope it work for you :)

answered Jul 12, 2018 at 0:13

Said El-Ghamri

1,0298 silver badges6 bronze badges

Collectives™ on Stack Overflow

Error compiling Angular 4 application "__webpack_require__"

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related