search

kamilkisiela / apollo-angular

A fully-featured, production ready caching GraphQL client for Angular and every GraphQL server 🎁
https://apollo-angular.com
MIT License
1.5k stars 310 forks source link

Dependency error on Angular 13 #1728

Closed arni1981 closed 2 years ago

arni1981 commented 2 years ago

On an Angular 13 project running

ng add apollo-angular

results in this...

npm ERR! Could not resolve dependency: npm ERR! peer @angular/core@"^6.1.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from apollo-angular@2.6.0

To Reproduce

Steps to reproduce the behavior:

Run from terminal ng add apollo-angular

Expected behavior

Well, I was hoping for this to work :)

Environment:

├── @angular/cli@13.0.1
├── @angular/core@13.0.0
└── typescript@4.4.4
Urigo commented 2 years ago

Thank you @arni1981 for the report!

Sorry but I'm not adding a lot here but just labeling it according to our new Contribution Guide and issue flow.

A way to move this forward would be to send us a PR for a fix.

Thank you and sorry that this comment is not a complete solution (yet).

kamilkisiela commented 2 years ago

1729

Yogu commented 2 years ago

Hey, great that this got fixed! This issue is tagged with "alpha-release-testing" - is there an alpha release of the npm package we could test?

gilgardosh commented 2 years ago

Hey @Yogu , you are actually right, there's no automatic alpha releases for this repo (the tags are standard for The Guild repos, most of them do have it). Anyway, we'll manually release an alpha later today, I'll link it here.

kamilkisiela commented 2 years ago

3.0.0-alpha.2

heberlopezz commented 2 years ago

image I got this error trying to test 3.0.0-alpha.2

My dependencies "dependencies": { "@angular/animations": "~13.0.0", "@angular/cdk": "13.0.3", "@angular/common": "~13.0.0", "@angular/compiler": "~13.0.0", "@angular/core": "~13.0.0", "@angular/forms": "~13.0.0", "@angular/material": "13.0.3", "@angular/platform-browser": "~13.0.0", "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "@apollo/client": "^3.5.6", "apollo-angular": "3.0.0-alpha.2", "graphql": "^16.1.0", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }

elliotleelewis commented 2 years ago

image I got this error trying to test 3.0.0-alpha.2

My dependencies "dependencies": { "@angular/animations": "~13.0.0", "@angular/cdk": "13.0.3", "@angular/common": "~13.0.0", "@angular/compiler": "~13.0.0", "@angular/core": "~13.0.0", "@angular/forms": "~13.0.0", "@angular/material": "13.0.3", "@angular/platform-browser": "~13.0.0", "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "@apollo/client": "^3.5.6", "apollo-angular": "3.0.0-alpha.2", "graphql": "^16.1.0", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }

@heberlopezz that's caused by an incompatibility with GraphQL 16. There's an open issue for that too: https://github.com/kamilkisiela/apollo-angular/issues/1723

jgomesmv commented 2 years ago

I was able to compile it successfully but I got this DI error: image

My dependencies: "@ag-grid-community/all-modules": "^26.2.0", "@ag-grid-community/angular": "^26.2.0", "@ag-grid-enterprise/all-modules": "^26.2.0", "@angular/animations": "~13.0.3", "@angular/cdk": "^13.0.3", "@angular/common": "~13.0.3", "@angular/compiler": "~13.0.3", "@angular/core": "~13.0.3", "@angular/forms": "~13.0.3", "@angular/platform-browser": "~13.0.3", "@angular/platform-browser-dynamic": "~13.0.3", "@angular/router": "~13.0.3", "@apollo/client": "^3.5.6", "@datorama/akita": "^7.0.1", "@fortawesome/fontawesome-free": "^5.15.4", "@juggle/resize-observer": "^3.3.1", "@nebular/date-fns": "^9.0.0", "@nebular/eva-icons": "^9.0.0", "@nebular/theme": "^9.0.0", "@ngneat/until-destroy": "^9.0.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "@rxweb/reactive-form-validators": "^2.1.6", "angular-oauth2-oidc": "^13.0.1", "apollo-angular": "^3.0.0-alpha.2", "date-fns": "^2.27.0", "echarts": "^5.2.2", "eva-icons": "^1.1.2", "gql-query-builder": "^3.5.5", "graphql": "^15.8.0", "guid-typescript": "^1.0.9", "lodash-es": "^4.17.21", "ngx-echarts": "^8.0.1", "normalize.css": "^8.0.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.11.4"

jgomesmv commented 2 years ago

I was able to compile it successfully but I got this DI error: image

My dependencies: "@ag-grid-community/all-modules": "^26.2.0", "@ag-grid-community/angular": "^26.2.0", "@ag-grid-enterprise/all-modules": "^26.2.0", "@angular/animations": "~13.0.3", "@angular/cdk": "^13.0.3", "@angular/common": "~13.0.3", "@angular/compiler": "~13.0.3", "@angular/core": "~13.0.3", "@angular/forms": "~13.0.3", "@angular/platform-browser": "~13.0.3", "@angular/platform-browser-dynamic": "~13.0.3", "@angular/router": "~13.0.3", "@apollo/client": "^3.5.6", "@datorama/akita": "^7.0.1", "@fortawesome/fontawesome-free": "^5.15.4", "@juggle/resize-observer": "^3.3.1", "@nebular/date-fns": "^9.0.0", "@nebular/eva-icons": "^9.0.0", "@nebular/theme": "^9.0.0", "@ngneat/until-destroy": "^9.0.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "@rxweb/reactive-form-validators": "^2.1.6", "angular-oauth2-oidc": "^13.0.1", "apollo-angular": "^3.0.0-alpha.2", "date-fns": "^2.27.0", "echarts": "^5.2.2", "eva-icons": "^1.1.2", "gql-query-builder": "^3.5.5", "graphql": "^15.8.0", "guid-typescript": "^1.0.9", "lodash-es": "^4.17.21", "ngx-echarts": "^8.0.1", "normalize.css": "^8.0.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.11.4"

I was able to make it work after importing the apollo module on my app module: image

alfaproject commented 2 years ago

@kamilkisiela are you planning a release soon?

Diluka commented 2 years ago

add 3.0.0-alpha.2 to new project we got this

@NgModule({
  exports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

but update 2.6.0 to 3.0.0-alpha.2 missing exports

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}
bendehghan commented 2 years ago

Guys we are still waiting for this. Any update on your plans please??

etwillbefine commented 2 years ago

3.0.0-alpha.2 is working fine for me except for one typing mismatch with a newer graphql version (16.x):

Error: node_modules/apollo-angular/types.d.ts:41:18 - error TS2430: Interface 'SubscriptionResult<TData>' incorrectly extends interface 'ExecutionResult<ObjMap<unknown>, ObjMap<unknown>>'.
  Types of property 'data' are incompatible.
    Type 'TData | undefined' is not assignable to type 'ObjMap<unknown> | null | undefined'.
      Type 'TData' is not assignable to type 'ObjMap<unknown> | null | undefined'.
        Type 'TData' is not assignable to type 'ObjMap<unknown>'.

41 export interface SubscriptionResult<TData> extends ExecutionResult {
- export interface SubscriptionResult<TData> extends ExecutionResult {
+ export interface SubscriptionResult<TData> extends ExecutionResult<TData> {

I also had to add Apollo itself as a providers item (in addition to the APOLLO_OPTIONS) to my module. Would be great to see the 3.x release going stable as its currently the only version providing real support for Angular 13x and @apollo/client@3.x

Edit: I'm not using ApolloModule (deprecated/removed already in v2.x)

bendehghan commented 2 years ago

So, I've been trying to make this work but haven't been successful. Is there a sample minimal angular project that someone can post? Trying to decipher bits and pieces together from comments is not working and pretty annoying.

If this project is dormant, we can maybe move on. Right now it's in the main path for our product to get to angular 13 which was released some time ago. So if anyone has an alternative of for this or a more active fork I'd give that a try.

EpicVoyage commented 2 years ago

I can't speak for everyone else, but upgrading apollo-angular to "^3.0.0-alpha.2" resolved the issue for me.

jmtt89 commented 2 years ago

I using graphql-codegen for generating all Angular Services from schemas and stop working on runtime, produce "NullInjectorError: No provider for Apollo!" so i add ApolloModule on import and work well again.

This is my module:

import { HttpClientModule } from '@angular/common/http'
import { NgModule } from '@angular/core'
import { ApolloLink, InMemoryCache } from '@apollo/client/core'
import { setContext } from '@apollo/client/link/context'
import { APOLLO_NAMED_OPTIONS, NamedOptions, ApolloModule } from 'apollo-angular'
import { HttpLink } from 'apollo-angular/http'

import { environment } from '../../../environments/environment'

const uri = environment.graphql

@NgModule({
  imports: [HttpClientModule, ApolloModule],
  providers: [
    {
      provide: APOLLO_NAMED_OPTIONS,
      useFactory: (httpLink: HttpLink): NamedOptions => {
        const basic = setContext((operation, context) => ({
          headers: {
            accept: 'charset=utf-8'
          }
        }))

        const auth = setContext((operation, context) => {
          const token = localStorage.getItem('token')

          if (token === null) {
            return {}
          } else {
            return {
              headers: {
                authorization: `JWT ${token}`
              }
            }
          }
        })

        return {
          client: {
            // <-- this settings will be saved by name: newClientName
            cache: new InMemoryCache(),
            link: ApolloLink.from([basic, auth, httpLink.create({ uri })])
          }
        }
      },
      deps: [HttpLink]
    }
  ]
})
export class GraphQLModule {}
bendehghan commented 2 years ago

You have to add Apollo to the providers list: 

@NgModule({
    imports: [HttpClientModule],
    providers: [
        Apollo,
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink], // HttpLink is loaded before the factory is called
        },
    ],
})

This took me about a week to figure out. Super frustrating and disappointing...

I using graphql-codegen for generating all Angular Services from schemas and stop working on runtime, produce "NullInjectorError: No provider for Apollo!" so i add ApolloModule on import and work well again.

This is my module:

import { HttpClientModule } from '@angular/common/http'
import { NgModule } from '@angular/core'
import { ApolloLink, InMemoryCache } from '@apollo/client/core'
import { setContext } from '@apollo/client/link/context'
import { APOLLO_NAMED_OPTIONS, NamedOptions, ApolloModule } from 'apollo-angular'
import { HttpLink } from 'apollo-angular/http'

import { environment } from '../../../environments/environment'

const uri = environment.graphql

@NgModule({
  imports: [HttpClientModule, ApolloModule],
  providers: [
    {
      provide: APOLLO_NAMED_OPTIONS,
      useFactory: (httpLink: HttpLink): NamedOptions => {
        const basic = setContext((operation, context) => ({
          headers: {
            accept: 'charset=utf-8'
          }
        }))

        const auth = setContext((operation, context) => {
          const token = localStorage.getItem('token')

          if (token === null) {
            return {}
          } else {
            return {
              headers: {
                authorization: `JWT ${token}`
              }
            }
          }
        })

        return {
          client: {
            // <-- this settings will be saved by name: newClientName
            cache: new InMemoryCache(),
            link: ApolloLink.from([basic, auth, httpLink.create({ uri })])
          }
        }
      },
      deps: [HttpLink]
    }
  ]
})
export class GraphQLModule {}
ruizmarc commented 2 years ago

@kamilkisiela thanks for you amazing work with this lib. Is there anything we can do to help on releasing apollo-angular v3 as stable version? Is there any stopper we can help with?

anymos commented 2 years ago

@kamilkisiela same question than @ruizmarc ?