Ben
Ben

Reputation: 893

Can't Resolve NPM Dependencies in Shared Angular 2 Library

I am trying to create an Angular 2 library for services, components, and models I want to share between 3-4 different interfaces/apps that are frontends to the same database.

I am using the very helpful Angular 2 generator library here.

My services in the library are based around Apollo client and GraphQL.

However, when I symlink the library build to import into my main project, the Apollo dependencies don't seem to resolve.

I get the following two errors from my app build: Can't resolve 'apollo-angular/index' and Can't resolve 'graphql-tag/index'. This is in spite of the fact that both these libraries are installed to my node_modules in my app, however, they don't seem to transferred by the Gulp build into my dist directory of my library but I am not even sure they are meant to be.

I have also tried to setup peer dependencies in my library's package.json as follows:

"peerDependencies": {
    "@angular/core": "^4.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "graphql-tag": "^2.4.2",
    "apollo-angular": "^0.13.0",
    "apollo-client": "~1.9.0-1"
}

In addition, when I run npm install to check everything is installed, I get npm WARN [email protected] requires a peer of apollo-client@>=0.8.0 <=0.10.1 || >=1.0.0-rc <2.0.0 but none was installed. and npm WARN [email protected] requires a peer of apollo-client@>=0.7.2 <=0.10.1 || >=1.0.0-beta <2.0.0 but none was installed. even though Apollo Client 1.9.0-1 is installed. I get these warnings for both my app and my library running npm install.

If I use Apollo Client in my app directly (not through a library) it works fine in spite of these warnings.

Can anyone help point me in the right direction to resolve these issues?

UPDATE:

As requested in the comments, I can confirm that Apollo Client exists in both my app's node_modules folder and my library's. The version is 1.9.0-1 in both cases. Apollo Client is used for easily making GraphQL queries from Angular 2 applications.

Upvotes: 0

Views: 468

Answers (1)

Kamil Kisiela
Kamil Kisiela

Reputation: 509

It might occur because of this issue.

Try to define paths in your ts

"compilerOptions" : {

  ...

  "paths": {
    "@angular/*": ["../node_modules/@angular/*"],
    "apollo-client": ["../node_modules/apollo-client"],
    "apollo-client-rxjs": ["../node_modules/apollo-angular/node_modules/apollo-client-rxjs"]
  }
}

Upvotes: 1

Related Questions