Subscriptions-transport-ws: problem with 0.7.0 in Angular, while 0.6.0 works

[loremaps]

With typescript 2.3.0 in my angular project (angular-cli 1.0.3), I receive the following errors:

ERROR in /home/ui/node_modules/graphql-subscriptions/dist/with-filter.d.ts (2,94): Generic type 'AsyncIterator<T, E>' requires 2 type argument(s).

ERROR in /home/ui/node_modules/graphql-subscriptions/dist/with-filter.d.ts (3,58): Generic type 'AsyncIterator<T, E>' requires 2 type argument(s).

ERROR in /home/ui/node_modules/subscriptions-transport-ws/dist/server.d.ts (5,41): Generic type 'AsyncIterator<T, E>' requires 2 type argument(s).

ERROR in /home/ui/node_modules/subscriptions-transport-ws/dist/server.d.ts (29,58): Generic type 'AsyncIterator<T, E>' requires 2 type argument(s).

ERROR in /home/ui/node_modules/subscriptions-transport-ws/dist/server.d.ts (32,31): Generic type 'AsyncIterator<T, E>' requires 2 type argument(s). webpack: Failed to compile.

Please note that with 0.6.0 it works fine. Am I missing something?

[mistic]

@loremaps just a feeling: are u using typescript in your own project that is importing subscriptions-transport-ws as dependency? If yes, are your TS configured to look into your node_modules ? I believe it is and you're not using esnext in your own tslint config. Anyway, I bet that adding

“exclude”: [
    “node_modules”,
  ]

to your tsconfig.json should solve your problem.

[SebastianSchenk]

I have the same problem. @mistic unfortunately, your solution didn't fix the problem for me.

[dotansimha]

@loremaps
I don't understand why your Angular 2 project uses graphql-subscriptions and subscritptions-transport-ws/dist/server.d.ts. Do you use it also for server side code? Your angular app should not load these files (because you are not loading them from the app, if your app is a client side app).

[loremaps]

Thank you very much for looking into this...
@mistic excluding the node_module did not fix the issue for me either (but the esnext hint was helpful).
@dotansimha I do not think I use any server side code.

I did some tests: I stated a clean angular project (now with angular-cli 1.0.6):

ng new sub7test
cd sub7test
npm install --save apollo-angular apollo-client subscriptions-transport-ws

Then I create the following typescript file:

import { ApolloClient, createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';

// Create a normal network interface:
const networkInterface = createNetworkInterface('http://localhost:3004/graphql');

// Crete WS client
const wsClient = new SubscriptionClient('ws://localhost:3004/subscriptions', {
  reconnect: true
});

// Extend the network interface with the WebSocket
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
);

// Finally, create your ApolloClient instance with the modified network interface
const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions
});

export function getApolloClient(): ApolloClient {
  return client;
}

At this point build fails with different error:

ERROR in /home/panos/Tests/sub7test/node_modules/graphql-subscriptions/dist/pubsub-engine.d.ts (5,52): Cannot find name 'AsyncIterator'.

ERROR in /home/panos/Tests/sub7test/node_modules/graphql-subscriptions/dist/pubsub.d.ts (12,52): Cannot find name 'AsyncIterator'.

ERROR in /home/panos/Tests/sub7test/node_modules/graphql-subscriptions/dist/with-filter.d.ts (2,94): Cannot find name 'AsyncIterator'.

ERROR in /home/panos/Tests/sub7test/node_modules/graphql-subscriptions/dist/with-filter.d.ts (3,58): Cannot find name 'AsyncIterator'.

ERROR in /home/panos/Tests/sub7test/node_modules/subscriptions-transport-ws/dist/server.d.ts (5,41): Cannot find name 'AsyncIterator'.

ERROR in /home/panos/Tests/sub7test/node_modules/subscriptions-transport-ws/dist/server.d.ts (29,58): Cannot find name 'AsyncIterator'.

ERROR in /home/panos/Tests/sub7test/node_modules/subscriptions-transport-ws/dist/server.d.ts (32,31): Cannot find name 'AsyncIterator'.

I noticed that the typescript version in package.json was:
"typescript": "~2.2.0"
I updated to:
"typescript": "~2.3.3"
and also added the "esnext" (as @mistic hinted) to my tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "esnext",
      "es2016",
      "dom"
    ]
  }
}

Now the project builds...I will now try to find out what's wrong with my original project and let you know. Thanks again.

[mistic]

@loremaps looking at the errors its clear to me that my hint about adding esnext will solve the problem because the error states that AsyncIterator so as the AsyncIterator it's only available in esnext this will solve your problem, apparently. I said apparently because I believe this is not your real problem. Your typescript project should't look to a type being used in already compiled dependency. This is very strange.. Any idea @dotansimha ?

[dotansimha]

I guess that's an issue with the Angular CLI default config in version 1.0.3, because it looks like the 1.0.6 handles the node_modules typings correctly, because the error server files are no longer loaded, and not throwing an error.
The issue with the missing AsyncIterator could be easily solved by adding esnext to tsconfig, but it will work only with TypeScript > 2.3 (as described here).

I guess you can also use 1.1.0-beta.1 of angular-cli, because it uses TypeScript 2.3 by default.

[loremaps]

I can now confirm that after upgrading to angular-cli 1.0.6, TypeScript 2.3.3 and adding esnext to tsconfig resolved the issue for me. Thank you for the help!

[tcjcodes]

For anyone with the same TS issue, I had to delete my yarn.lock file, run yarn install, and manually install @types/node to my devDependencies for the above solution to work.

Related thread: https://github.com/Microsoft/TypeScript/issues/16772