Apollo-angular: Issue with "Exclude"

[Barvor]

Hello,

I have the following Issue:

I want to build an GraphQL backed Angular App and chose apollo-angular (boost variant) and set it all up.

Now my compiler tell me that:

ERROR in node_modules/apollo-angular/types.d.ts(9,58): error TS2304: Cannot find name 'Exclude'.

my tsconfig is like so:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "es5", "dom", "esnext.asynciterable", "es6"]
}
}

I am currently using Angular-core and compiler in version 5.2.0

What is strange is that I can Ctrl-Click Exclude in the mentioned file and come to lib.es5.d.ts

any help?

[Barvor]

I have tested a little bit and i can reproduce this by just following the following example in a brand new project:

https://www.apollographql.com/docs/angular/basics/setup.html

without adding "esnext.asynciterable" to the tsconfig.json under "lib" you get the asyncIterator and asyncIterable errors in your @types.

[kamilkisiela]

New versions requires Angular 6.1

https://github.com/apollographql/apollo-angular/blob/master/packages/apollo-angular/package.json#L30

And the issue you mentioned is because we also require TypeScript 2.8+.

[Barvor]

Hey @kamilkisiela
as I can not upgrade to angular 6.1. coudl you provide which versions I can use with my current package json?

Thanks.

[kamilkisiela]

Previous one, v1.1.0

[kamilkisiela]

And if you chose Apollo Angular Boost then try out beta versions.

[Barvor]

Thank you @kamilkisiela ,

I will try. I have found a similar project and it seems to work. I will try to change my package.json to the ones provided by the other project (seems to align with your suggestions).

I will come back with the result.

Thank you for your help

[natepaxton]

I upgraded to 6.1 and still receive the error from version 1.2 of apollo-angular.

[natepaxton]

Updating typescript from 2.7.2 to 2.8.3 as per a similar issue found here solved my issue.

[kamilkisiela]

Yep, that's something that I couldn't avoid. Either good working QMS services or TS 2.7 so I decided to move on and use ng 6.1 + TS 2.8+

[Barvor]

Ok so here is my setup:
npm:
5.8.0

Angular CLI: 1.6.5
Node: 8.11.1
OS: win32 x64
Angular: 5.2.11

This is my package JSON:
{ "name": "stuff-angular", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "coverage": "ng test --code-coverage", "headless": "ng test --watch=false --browsers=ChromeHeadless", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/cdk": "5.2.4", "@angular/material": "5.2.2",, "moment": "^2.22.2", "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "apollo-angular": "^1.0.1", "apollo-angular-link-http": "^1.0.2-beta.0", "apollo-cache-inmemory": "^1.1.5", "apollo-client": "^2.2.0", "core-js": "^2.4.1", "graphql": "^0.12.3", "graphql-tag": "^2.6.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/material-moment-adapter": "5.2.2", "@angular/cli": "1.6.5", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "2.8.3" } }

and this is my call (I have seperated the service from the component ts and run it in the ngOnInit of the component):

getData() { this.courses = this.apollo .watchQuery<Query>({ query: gql
query allCourses {
allCourses {
id
title
author
description
topic
url
}
}
}) .valueChanges.pipe(map(result => result.data.allCourses)); }

My error messages:

ERROR in node_modules/@types/graphql/subscription/subscribe.d.ts(17,12): error TS2304: Cannot find name 'AsyncIterator'.
node_modules/@types/graphql/subscription/subscribe.d.ts(29,12): error TS2304: Cannot find name 'AsyncIterable'.
node_modules/apollo-angular/QueryRef.d.ts(15,33): error TS2314: Generic type 'FetchMoreQueryOptions' requires 2 type argument(s).
node_modules/apollo-angular/QueryRef.d.ts(17,60): error TS2314: Generic type 'UpdateQueryOptions' requires 1 type argument(s).

Things are very inconsistent.

[kamilkisiela]

@Barvor that's because ApolloClient requires esnext.asynciterable

Do what I did here:
https://github.com/kamilkisiela/apollo-angular-services/blob/375ab6c342e2ac1e5f3f5befc8a8717add4f61f7/tsconfig.json#L18

I think would be nice to have it described in docs.

[kamilkisiela]

If someone want to pick it up
https://github.com/apollographql/apollo-angular/issues/772

[Barvor]

@kamilkisiela thank you.

I have done this before, and I have found a solution for the following 2 errors:
ERROR in node_modules/apollo-angular/QueryRef.d.ts(23,31): error TS2314: Generic type 'FetchMoreQueryOptions' requires 2 type argument(s).
node_modules/apollo-angular/QueryRef.d.ts(25,58): error TS2314: Generic type 'UpdateQueryOptions' requires 1 type argument(s).

I have found here: https://github.com/apollographql/react-apollo/issues/2104 to use skipLibCheck but that kind of gives me a bad feeling. anything else i can do?

After adding asyniterable and the skipLibcheck it seems to compile without error.

[kamilkisiela]

That's because apollo-client introduced a breaking change and it messed up everything.

https://github.com/apollographql/apollo-angular/issues/669

[Barvor]

ok seems to be working now. skipLibCheck solved it. ty

[beeman]

I got rid of it by upgrading TypeScript to 2.9.2:

npm install [email protected] --save-exact

[kamilkisiela]

I mentioned it here https://github.com/apollographql/apollo-angular/issues/770#issuecomment-415448967

[kinjalgiri]

I got rid of it by upgrading TypeScript to 2.9.2:

npm install [email protected] --save-exact

I did the same and it is solved. Thank you