angularupdatingangular16

Updated angular to v16, now mat components (e.g. mat-icon) cannot be found and is an unknown element?


So I just updated my project from Angular v15 to v16, and suddenly I get a lot of missing imports errors thrown, such as error NG8001: 'mat-icon' is not a known element but I have imported everything accordingly to documentation in my app.module.ts:

import {MatIconModule} from '@angular/material/icon';

@NgModule({
  declarations: [...],
  imports: [..., MatIconModule, ...],
  bootstrap: [AppComponent],
})
export class AppModule {}

Or am I missing something in my package.json? I have tried to update everything according to docs:

 "dependencies": {
   "@angular-devkit/core": "^16.2.0",
   "@angular-devkit/schematics": "^16.2.0",
   "@angular/animations": "~16.2.1",
   "@angular/cdk": "^16.2.1",
   "@angular/common": "~16.2.1",
   "@angular/compiler": "~16.2.1",
   "@angular/core": "~16.2.1",
   "@angular/forms": "~16.2.1",
   "@angular/material": "^16.2.1",
   "@angular/platform-browser": "^16.2.1",
   "@angular/platform-browser-dynamic": "~16.2.1",
   "@angular/router": "~16.2.1",
   "bootstrap": "^4.4.1",
   "moment": "^2.26.0",
   "popper.js": "^1.16.0",
   "rxjs": "^6.5.5",
   "tslib": "^2.0.0",
   "xstate": "~4.6.7",
   "zone.js": "~0.13.1"
 }

I tried deleting node_modules folder and reinstalling, running npm install, and npm ci but nothing has worked till now. I only find the tip to add the missing module to app.module.ts but I have this already, has anyone also run into this problem and found a solution?


Solution

  • I've encountered the same issue. To solve it I went to version 15 (which compiled without errors), turned version 15 into standalone architecture and updated the project into version 16 after that. I did a ticket on that issue here: why angular material components became unknown elements after upgrade to Angular 16