0

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?

FishyK
  • 121
  • 1
  • 7
  • 1
    try deleting package-lock.json, delete node modules and try installing packages again. This sometimes helps me to resolve similar kind of issues. – Alexus Aug 17 '23 at 12:08
  • also, the MatIconModule needs to be imported either in your SHaredModules (which is then imported in all your modules) or you need to make sure that each module, where you use mat-icons, have this module imported. – Alexus Aug 17 '23 at 12:11

1 Answers1

1

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

Kianni
  • 46
  • 4
  • Thank you, I've come across your post and changing it to standalone did seem to resolve this issue! Though I don't understand why this isn't noted anywhere in the official documentation – FishyK Aug 18 '23 at 17:34