CODEWITHSUNDEEP
angularangular-material2
amitection
amitection

Reputation: 2943

Error compiling Angular 4 application "__webpack_require__"

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.

package.json

Upvotes: 2

Views: 7580

Answers (2)

Said El-Ghamri
Said El-Ghamri

Reputation: 1029

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 :)

Upvotes: 2

p4r1
p4r1

Reputation: 2650

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"

Upvotes: 6

Related Questions