Confused about `overrides` in `package.json` - package.json

Question

Why does overrides not work:
{
"dependencies": {
"#angular/animations": "^15.0.0",
"#angular/cdk": "15.1.2",
"#angular/common": "15.1.2",
...
},
"overrides": {
"#angular/animations": "15.1.2",
}
}
when this works:
{
"dependencies": {
"#angular/animations": "15.1.2",
"#angular/cdk": "15.1.2",
"#angular/common": "15.1.2",
...
}
}
Is my override telling package.json to set "#angular/animations" to 15.1.2?
The former throws an EOVERRIDE error when I run npm install or npm install --force:
npm ERR! code EOVERRIDE
npm ERR! Override for #angular/animations#^15.0.0 conflicts with direct dependency
The overrides documentation says this:
You may not set an override for a package that you directly depend on
unless both the dependency and the override itself share the exact
same spec. To make this limitation easier to deal with, overrides may
also be defined as a reference to a spec for a direct dependency by
prefixing the name of the package you wish the version to match with a
$.
{
"dependencies": {
"foo": "^1.0.0"
},
"overrides": {
// BAD, will throw an EOVERRIDE error
// "foo": "^2.0.0"
// GOOD, specs match so override is allowed
// "foo": "^1.0.0"
// BEST, the override is defined as a reference to the dependency
"foo": "$foo",
// the referenced package does not need to match the overridden one
"bar": "$foo"
}
}
Is the documentation saying that
BAD: The override can't be newer than the dependency.
GOOD: The override can be the same as the dependency. This what I'm doing.
BEST: I don't understand what this.

Answer 1

The main purpose of overrides is to manage dependencies of your dependencies.
So if you would like to override one of your package which is in your direct deps (#angular/animations is in your direct deps) then there are 2 options:
1)
{
"dependencies": {
"#angular/animations": "^15.0.0",
},
"overrides": {
"#angular/animations": "$#angular/animations",
}
}
All #angular/animations packages in your deps tree will be replaced to ^15.0.0, but there is limitation you mentioned (override must contain the same version as dependencies contains).
2)
{
"dependencies": {
"#angular/animations": "^15.0.0",
},
"overrides": {
"some_package":{"#angular/animations": "any version"},
}
}
You may use nested syntax (replace dep version for a specific package) and then there is not limitation for the same version.
About 'BEST' option from the docs. You may use prefix $ plus just name of the package and then you will avoid yourself to update version inside override field each time when version inside dependencies will be updated.