0

I am upgrading an inherited app from Angular 9 - 14. I am encountering a couple of types of errors that cannot be explained. These errors seem to be related to Material Modules and FormModules. I would guess that I am not importing / declaring / configuring these modules properly, but cannot understand where to begin troubleshooting.

I believe I should focus on how Angular is compiling my app and perhaps URLs are not matching (see here) but I don't know anything about ngcc/Ivy.

Errors:

  • ng8001 "mat-ELEMENT" is not a known element. IE: mat-icon, mat-checkbox, mat-tab-group
  • ng8002 Can't bind SOME-ATTR since it isn-t a known property of ELEMENT
  • TS2322 Type 'Event' is not assignable to type 'string'. This happens when trying to bind with ngModel

The usual cause of these errors is not properly importing the proper modules. For instance, an error like 'mat-icon' is not a known element is usually solved my importing MatIconModule into the module where the offending component is declared. For errors related to ngModel, typically importing FormsModule will fix the problem.

Also, I have deleted my package.lock files and my node_modules folder before reinstalling my app. Like so:

rm -d -r node_modules
pnpm install

I am properly importing the Modules I need to. This app worked using Yarn and Angular 9. Now I am trying to compile using PNPM and Angular 14. As a disclaimer, i have no idea the difference between Yarn and PNPM - I inherited this problem and want to understand how to go forward. I have the following questions:

  • does angular 14 work with PNPM? If so, how do I run it? ng serve? pnpm start?
  • could I have an error in my modules that could be breaking the entire module, which prevents the modules from importing Material and FormsModule?
  • are there any debugging details i should pay attention to, wheter in my tsconfig file or angular.json file?
Jeff Wilkerson
  • 376
  • 2
  • 18
  • Did you do an increment update (from 9 to 10. then 10 to 11, etc)? OR did you go straight from 9 to 14? – skouch2022 Sep 19 '22 at 23:47
  • I went straight up. As I mentioned, this was an inherited problem. I was handed a repo, one branch had ng 9, the other had ng 14. I concede the most sensible approach is to increment the upgrades. I was just curious if there wasn't a quicker solution given that the errors I am seeing are directly related to Material and FormsModule. The ng 14 branch was never working, just updates to `package.json`, `angular.js`, and `tsconfig.json`. Would those changes be relevant? – Jeff Wilkerson Sep 20 '22 at 00:35
  • 2
    You'll ideally want to do _incremental_ versioned upgrades in order to reduce the amount of potential bugs that could happen from skipping over multiple major versions. Additionally, I don't see what `angular.js` has to do with Angular, unless you're referring to a different file entirely. – Edric Sep 20 '22 at 06:29
  • 1
    And as for pnpm support, AFAIK it's still [not officially supported](https://github.com/angular/angular/issues/43248) (which points to a [currently opened issue on Yarn's PnP support](https://github.com/angular/angular-cli/issues/16980)) – Edric Sep 20 '22 at 06:32
  • Additionally, how exactly did you update your dependencies? Is it via `ng update`, or installing the dependencies manually, or something else? – Edric Sep 20 '22 at 06:36
  • Opps. I mean `angular.json`, lol. This is all helpful info. I was also perplexed on how to update. I used `ng update` on a few packages like Material and CLI but was also using `pnpm install` . I will start over with NG 9 and incrememntally update. – Jeff Wilkerson Sep 20 '22 at 15:56

0 Answers0