CODEWITHSUNDEEP
angularangular-material
Javier salvañá
Javier salvañá

Reputation: 331

Updating Angular Material 8.2.3 to 9.2.4 broke my app

i`ve updated angular material from 8.2.3 to 9.2.4 but now i have a lot of errors related to the imports.

    import {MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatDialogModule, MatDividerModule,
  MatInputModule, MatFormFieldModule, MatCheckboxModule, MatExpansionModule, MatCardModule, MatSelectModule, 
  MatDatepickerModule, MatNativeDateModule, MatSnackBarModule, MatProgressSpinnerModule, MatTabsModule,
  MatChipsModule, MatListModule, MatTooltipModule, MatBottomSheetModule, MatAutocompleteModule,MatRadioModule, MatProgressBarModule} from '@angular/material';

Error: File 'c:/Proyectos/LIMSp/node_modules/@angular/material/index.d.ts' is not a module.ts(2306)

I have tried importing one by one like in documentation but it doesn´t work.

import {MatToolbarModule} from '@angular/material/toolbar'

Error: Module '"../../../node_modules/@angular/material/toolbar"' has no exported member 'MatToolbarModule'.ts(2305)

This is my package.json:

{
  "name": "sasin",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "nodemon --watch  server.js"
  },
  "private": true,
  "dependencies": {
    "@ag-grid-community/angular": "^22.1.2",
    "@ag-grid-community/core": "^22.1.1",
    "@angular/animations": "^9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.11",
    "@angular/compiler": "~9.1.11",
    "@angular/core": "~9.1.11",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.1.11",
    "@angular/localize": "^9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/material-moment-adapter": "^9.2.4",
    "@angular/platform-browser": "~9.1.11",
    "@angular/platform-browser-dynamic": "~9.1.11",
    "@angular/router": "~9.1.11",
    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
    "@ng-bootstrap/schematics": "^2.0.0-alpha.1",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "bcrypt": "^3.0.8",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "es-abstract": "^1.17.4",
    "file-saver": "^2.0.2",
    "jquery": "^3.4.1",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "mongodb": "^3.5.2",
    "mongoose": "^5.8.11",
    "mongoose-unique-validator": "^2.0.3",
    "multer": "^1.4.2",
    "node-pre-gyp": "^0.14.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.8",
    "@angular/cli": "^9.1.8",
    "@angular/compiler-cli": "~9.1.11",
    "@angular/language-service": "~9.1.11",
    "@types/jasmine": "~3.5.3",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~13.7.0",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.0",
    "karma-jasmine-html-reporter": "^1.5.2",
    "nodemon": "^2.0.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.6.2",
    "tslint": "~6.0.0",
    "typescript": "~3.7.5"
  }
}

I have been looking on internet and can´t find other peolple with this problem. I have read angular material documentation but says nothing about how to update. What am i missing???

Upvotes: 1

Views: 1341

Answers (2)

sunilbaba
sunilbaba

Reputation: 445

Instead of using plain ng update if you use as ng update --all it take care updating all of the dependency and it's dependency too

Upvotes: 0

bjdose
bjdose

Reputation: 1309

Try to delete node_modules folder and install all the packages again, besides you need to import as the documentation says. For Angular Material 9 you need to use individual imports by the package.

Incorrect way.

import {
  MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatDialogModule, MatDividerModule,
  MatInputModule, MatFormFieldModule, MatCheckboxModule, MatExpansionModule, MatCardModule, MatSelectModule, 
  MatDatepickerModule, MatNativeDateModule, MatSnackBarModule, MatProgressSpinnerModule, MatTabsModule,
  MatChipsModule, MatListModule, MatTooltipModule, MatBottomSheetModule, MatAutocompleteModule,MatRadioModule, MatProgressBarModule
} from '@angular/material';

Correct way.

import {MatToolbarModule} from '@angular/material/toolbar'

Upvotes: 2

Related Questions