I encountered a problem with material components after I have upgraded Angular project from version 15 into version 16. Namely some of elements like mat-form-field, mat-label, mat-select caused errors: error NG8001: 'mat-label' is not a known element. I write some of elements, because there are Angular material elements of the same type (mat-form-field for example) in the code of the project, which do not cause errors.
The whole code base works perfectly fine with Angular version 15, but something gets broken while upgrading into version 16. I will appreciate any considerations and tips regarding this issue! Thank you in advance=)
How I try to resolve this issue (without any success):
- I migrated project to standalone components by running
ng generate @angular/core:standalone
twice and chosing firsty "Bootstrap..." option and secondly "Convert all..." option.
- I downgraded Angular material package to version 15.2.9
- I deleted node_modules and package-lock.json files each time after changing versions and install them back after cleaning cash.
- I checked that material module for form element, which causes error is omported in ng-module All these actions have no effect, ng serve compilation fails with
error NG8001: 'mat-form-field' is not a known element
Yeah! Updating into v16 arranged!! As the issue was in modules I decided to turn project to standalone architecture. It was impossible to turn all components into standalone ones manually. It was not possible to make this using schematics based on code updated to version 16 (because it failed during compilation). So I returned to code version 15, which compiled well, switched the project to standalone using schematics and after that updated it to version 16.
I got a bunch of compilation errors then, but they were different (It was a progress!) I got rid of almost all of them updating dependency libraries, only one library was remained, one library which caused compilation failures in 11 components. It was angular-2-dropdown-multiselect, it was not updated for 5 years and I suspect it is not compatible with angular v16.
I replaced angular-2-dropdown-multiselect library with ngx-bootstrap-multiselect and I added one line to main.ts: import '@angular/compiler'; So, this case could be considered as a success and could be closed!
