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?
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