Error While resolving... Could not resolve dependency in Angular Library

Question

So I am writing my first ever component library. So far everything is going great but I am now testing my library by installing it into new projects.

My package.json file for my library project has the following set up (I have reduced/removed a lot of code here for read ability)

{
  "name": "@myfirstlibrary/angular-helpers",
  "private": false,
  "peerDependencies": {
    "@angular/animations": "^15.2.9",
    "@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",
    "@angular/forms": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "^15.2.9",
    "@angular/router": "^15.2.9",
    "rxjs": "7.8.1",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.8",
    "@angular-eslint/builder": "^15.2.1",
    "@angular-eslint/eslint-plugin": "^15.2.1",
    "@angular-eslint/eslint-plugin-template": "^15.2.1",
    "@angular-eslint/schematics": "^15.2.1",
    "@angular-eslint/template-parser": "^15.2.1",
    "@angular/animations": "^15.2.9",
    "@angular/cli": "^15.2.8",
    "@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/compiler-cli": "^15.2.9",
    "@angular/core": "^15.2.9",
    "@angular/forms": "^15.2.9",
    "@angular/language-service": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "^15.2.9",
    "@angular/router": "^15.2.9"
    }
}

Now I create a new project using the Angular CLI, which is using Angular 16... something like this (once again I have reduced what is in the package.json)

"dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0"
    }

I now install my library into the new application and I am met with the following error...

npm ERR! While resolving: [email protected]

npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/animations npm ERR!
@angular/animations@"^16.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/animations@"^15.2.9" from @myfirstlibrary/[email protected] npm ERR! node_modules/@myfirstlibrary/angular-helpers npm ERR!
@myfirstlibrary/angular-helpers@"*" from the root project

I know from reading on Stackoverflow that I can pass --legacy-peer-deps when installing to remove or prevent such an error and install my library (and it works when I do so), but this isn't ideal. My library is in Angular 15, I want it to be able to work with Angular 16 or previous Angular versions. What should I do about my library Peer Dependencies? I am unsure if the Angular Dependencies should be lower that version used in the devDependencies object or if I should use tilde(~) instead of caret(^) in package.json file when stating the dependencies. I am a bit lost here, can someone please advise me on this?

Answer 1

Solution 1: Your library @myfirstlibrary/angular-helpers is using angular material package, the safest way would be to upgrade your library to angular 16 and angular material 16.

Solution 2: In practice a library compiled with version X.0.0 of angular is often compatible with version X+1.0.0, that's what @angular/material does, you can take example on its package.json

Extract:

      "peerDependencies": {
        "@angular/animations": "^15.0.0 || ^16.0.0",
        "@angular/cdk": "15.2.9",
        "@angular/core": "^15.0.0 || ^16.0.0",
        "@angular/common": "^15.0.0 || ^16.0.0",
        "@angular/forms": "^15.0.0 || ^16.0.0",
        "@angular/platform-browser": "^15.0.0 || ^16.0.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }

You can do a similar thing in your libary/package.json. In your library you need to set @angular/material package as a dependency (and not peerdependency).