Upgrading from angular 7 to 12

Question

I am upgrading from angular 7 to 12 and got all these issues.

The problem is Angular Material

How can I solve this.

./src/app/material.module.ts:13:89-110 - Error: export 'MatAutocompleteModule' (imported as 'MatAutocompleteModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:112-126 - Error: export 'MatBadgeModule' (imported as 'MatBadgeModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:128-148 - Error: export 'MatBottomSheetModule' (imported as 'MatBottomSheetModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:150-165 - Error: export 'MatButtonModule' (imported as 'MatButtonModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:167-188 - Error: export 'MatButtonToggleModule' (imported as 'MatButtonToggleModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:190-203 - Error: export 'MatCardModule' (imported as 'MatCardModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:205-222 - Error: export 'MatCheckboxModule' (imported as 'MatCheckboxModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:224-238 - Error: export 'MatChipsModule' (imported as 'MatChipsModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:240-256 - Error: export 'MatStepperModule' (imported as 'MatStepperModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:258-277 - Error: export 'MatDatepickerModule' (imported as 'MatDatepickerModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:279-294 - Error: export 'MatDialogModule' (imported as 'MatDialogModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:296-312 - Error: export 'MatDividerModule' (imported as 'MatDividerModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:314-332 - Error: export 'MatExpansionModule' (imported as 'MatExpansionModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:334-351 - Error: export 'MatGridListModule' (imported as 'MatGridListModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:353-366 - Error: export 'MatIconModule' (imported as 'MatIconModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:[93m13:368-382 - Error: export 'MatInputModule' (imported as 'MatInputModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:384-397 - Error: export 'MatListModule' (imported as 'MatListModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:399-412 - Error: export 'MatMenuModule' (imported as 'MatMenuModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:414-433 - Error: export 'MatNativeDateModule' (imported as 'MatNativeDateModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:435-453 - Error: export 'MatPaginatorModule' (imported as 'MatPaginatorModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:455-475 - Error: export 'MatProgressBarModule' (imported as 'MatProgressBarModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:477-501 - Error: export 'MatProgressSpinnerModule' (imported as 'MatProgressSpinnerModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:503-517 - Error: export 'MatRadioModule' (imported as 'MatRadioModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:519-534 - Error: export 'MatRippleModule' (imported as 'MatRippleModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:536-551 - Error: export 'MatSelectModule' (imported as 'MatSelectModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:553-569 - Error: export 'MatSidenavModule' (imported as 'MatSidenavModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:571-586 - Error: export 'MatSliderModule' (imported as 'MatSliderModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:588-608 - Error: export 'MatSlideToggleModule' (imported as 'MatSlideToggleModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:610-627 - Error: export 'MatSnackBarModule' (imported as 'MatSnackBarModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:629-642 - Error: export 'MatSortModule' (imported as 'MatSortModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:644-658 - Error: export 'MatTableModule' (imported as 'MatTableModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:660-673 - Error: export 'MatTabsModule' (imported as 'MatTabsModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:675-691 - Error: export 'MatToolbarModule' (imported as 'MatToolbarModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:693-709 - Error: export 'MatTooltipModule' (imported as 'MatTooltipModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

./src/app/material.module.ts:13:711-724 - Error: export 'MatTreeModule' (imported as 'MatTreeModule') was not found in '@angular/material' (possible exports: ɵɵtsModuleIndicatorApiExtractorWorkaround)

Answer 1

From Angular Material v9, each module should be imported from a separated path, e.g:

import { MatAutocompleteModule } from '@angular/material/autocomplete';

If you updated your Angular app using ng update (it's recommended to update Angular using ng update, but it's not recommended to move across multiple major versions, see here for more details), it will be migrated automatically, and you don't need to do anything regarding the import.