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?
Improve this question
6
  • Did you do an increment update (from 9 to 10. then 10 to 11, etc)? OR did you go straight from 9 to 14? Commented Sep 19, 2022 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? Commented Sep 20, 2022 at 0: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. Commented Sep 20, 2022 at 6:29
  • 1
    And as for pnpm support, AFAIK it's still not officially supported (which points to a currently opened issue on Yarn's PnP support) Commented Sep 20, 2022 at 6:32
  • Additionally, how exactly did you update your dependencies? Is it via ng update, or installing the dependencies manually, or something else? Commented Sep 20, 2022 at 6:36
Related questions
0
Error Compilation with angular-cli + angular material
0
Cannot compile Angular project after installing a package
1
Angular Material Project fails to compile in Angular 4
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.