Meaning of error in Angular: "application depends upon a library published using Angular version"

Issue

Can someone please explain me meaning of this error?

This application depends upon a library published using Angular version 14.0.7, which requires Angular version 14.0.0 or newer to work correctly. Consider upgrading your application to use a more recent version of Angular.

1. When Application works fine with Angular version 14.0.0 or newer, why is it telling me to upgrade application? Should it not tell me to upgrade Angular instead? (Because, application is not finding Angular 14 or newer on my system)

2. Error message doesn't complain anything about installed version of Angular. So doesn't matter if I've installed Angular 1.0 or Angular 99.0. According to the message if I upgrade application to use, say Angular 99.0 will it automatically take care of the rest?

3. By the way here is what it shown installed on my machine:

Angular CLI: 14.1.1
Node: 16.13.1
Package Manager: npm 8.3.2
OS: win32 x64

Angular: 12.2.16
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package Version

@angular-devkit/architect 0.1202.16
@angular-devkit/build-angular 12.2.16
@angular-devkit/core 12.2.16
@angular-devkit/schematics 14.1.1 (cli-only)
@angular/fire 6.1.5
@schematics/angular 14.1.1 (cli-only)
rxjs 6.6.7
typescript 4.3.5

How to install Angular 14.1.1? Because whole internet talks about how to install only Angular CLI. I upgraded it as well. Is Angular CLI comes from different vendor or what? If not why is there provision to maintain separate versions, Angular CLI with outdated Angular?

Solution

After hours of struggling I found the answer on my own. The error message is perfectly misleading. Here we basically we have to make sure Angular and Angular CLI versions are same.

In my case Angular CLI was 14.1.1 and Angular was 12.2.16 which was the problem.

If they are not of same version, you can uninstall/install as shown below and make sure to install Angular CLI version same as Angular.

npm uninstall -g @angular/cli
npm uninstall @angular/cli
npm cache clear --force
npm install @angular/cli@12.2.16
npm install -g @angular/cli@12.2.16

If it still fails (i.e. "ng serve" command) then check on what package it fails. We may need to install appropriate versions of those packages. For example we installing version 12.2.16 of angular-devkit/schematics as shown below:

npm uninstall -g @angular-devkit/schematics
npm uninstall @angular-devkit/schematics
npm cache clear --force
npm install @angular-devkit/schematics@12.2.16
npm install -g @angular-devkit/schematics@12.2.16

Also there might be other dependency packages. For example let's say ng-chartist version mentioned in package.json is 6.0.1. This version is not compatible with Angular 12.2.16.

[You can check version compatibility with Angular version on package page: https://www.npmjs.com/package/ng-chartist. On the page it is mentioned that for Angular version 12.x ng-chartist version 5x is compatible. Now if we go here: https://www.npmjs.com/package/ng-chartist?activeTab=versions we can see 5.0.0 is latest in 5x series]

So we have to uninstall existing and install compatible version as shown below:

npm uninstall ng-chartist
npm uninstall -g ng-chartist
npm cache clear --force
npm install ng-chartist@5.0.0

Then we should be able to run server successfully with "ng serve"

Answered By - Atul