How to know npm package compatibility with Angular version prior install or upgrade?

Question

I am planning to upgrade existing project from Angular 4 to Angular 7. I have 8-12 packages (other than angular lib) used in project. How do I know in advance whether package is compatible with Angular 7? Below are the packages I am using in Angular 4.

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"angular-4-data-table-bootstrap-4": "^0.2.0",
"angular2-multiselect-dropdown": "^2.4.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"geolib": "^2.0.24",
"intl": "^1.2.5",
"mydatepicker": "^2.6.3",
"ng-pick-datetime": "^5.0.0-beta.10",
"ng2-filter-pipe": "^0.1.10",
"ngx-chips": "^1.6.5",
"ngx-inactivity": "^1.0.1",
"ngx-loading": "^1.0.8",
"ngx-order-pipe": "^1.1.0",
"ngx-pagination": "^3.0.1",
"rxjs": "^5.4.2",
"web-animations-js": "^2.3.1",
"xlsx": "^0.11.14",
"xlsx-style": "^0.8.13",
"zone.js": "^0.8.14"

Answer 1

You should check one by one all these packages on github, open the package.json file for each of them and check the peer-dependencies property for each of them.

For example, angular2-modal package.json looks like this:

 ....
 "peerDependencies": {
    "@angular/core": "^2.1.1",
    "@angular/common": "^2.1.1"
 },
 ....

This means it won't work with any version of angular > 2.

By the way, you are lucky because npm and yarn will do the dirty job for you. You can just update your angular version and if some peer dependency is not met, then the package manager will alert you with a warning.

UNMET PEER DEPENDENCY angular-animate@^1.5.0 +--

UNMET PEER DEPENDENCY angular-aria@^1.5.0 +-- angular-material@1.0.6 +

UNMET PEER DEPENDENCY angular-messages@^1.5.0 `-- mdi@1.4.57`

and you can fix them package by package