The challenge at hand
I encountered an issue with my two Angular projects. The first project serves as a library utilized by the second project. I recently upgraded both projects to Angular 14 following this guide.
However, after running an npm i on the second project, I was surprised to see that it still required Angular 3 for the library, which left me puzzled and unable to resolve the discrepancy.
Here is the error message displayed when executing npm i in the second project:
While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50333f3d203f3e353e247d333f3f3b39352310617e61607e60">[email protected]</a>
Found: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6704080a0a080927565349544957">[email protected]</a>
node_modules/@angular/common
@angular/common@"^14.3.0" from the root project
Could not resolve dependency:
peer @angular/common@"~13.1.2" from @xxx/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f13161d0d1e0d063f4e514e4b47514f520d1c514c4b4c4946">[email protected]</a>
node_modules/@xxx/library
@xxx/library@"1.148.0-rc.34369" from the root project
Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
This section highlights the configuration within the package.json of the library:
{
"name": "xxx-library",
"version": "1.148.0",
... more content here
}
Similarly, below are the details from the package.json of the second project:
{
"name": "component-cookies",
"version": "1.10.0",
... various scripts and dependencies listed
}
The strategies employed
To tackle this dilemma, I experimented with several solutions:
- Deleting the
package-lock.jsonfile from both projects before runningnpm iagain. - Removing the
package-lock.json,node-modules, and.angular/cachedirectories prior to re-executingnpm i. - Erasing the local project entirely and reinstalling everything from the remote branch afresh.
- Upgrading the Node version locally from 16 to 18.
- Scouring through the library's
package-lock.jsonto identify any dependencies linked to Angular 13.
Note:
Upon inspecting the library's package-lock.json, I noticed only one dependency pointing towards Angular 13:
...
some relevant information from package-lock.json
...Despite reviewing additional resources confirming no issues, the library continues to request Angular 13 upon installation in the second project, raising confusion regarding the matter due to the absence of other Angular 13 references in the package-lock file.
Recent developments
Ran npm ls @angular/common resulting in:
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="555b5bb54e51536b49505f48583d52535148745746495e7646540b09544e51">[email protected]</a>
Some directory paths and Angular versions listed here