Cannot find namespace 'ZenObservable' in aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts

[wildbsiu]

Note: If your issue/feature-request/question is regarding the AWS AppSync service, please log it in the
official AWS AppSync forum

Do you want to request a feature or report a bug?
bug

What is the current behavior?
I am using the Apollo client along with aws-appsync-auth-link and aws-appsync-subscription-link packages in an Angular v12+ project.

I am trying to upgrade Apollo Client from v2.6 to v3.x. While doing so I had to upgrade aws-appsync-auth-link and aws-appsync-subscription-link packages too to their latest version. Below are the dependencies and dev-dependencies in my current package.json

"dependencies": {
...
"@apollo/client": "^3.5.10",
"@aws-amplify/core": "^4.4.0",
"@nrwl/angular": "12.9.0",
"aws-amplify": "^4.3.11",
"aws-appsync-auth-link": "^3.0.7",
"aws-appsync-subscription-link": "^3.0.10",
"aws-sdk": "^2.704.0",
"graphql": "^16.3.0",
"zone.js": "~0.11.4",
...
},
"devDependencies": {
...
"@angular/cli": "12.2.6",
"@nrwl/cli": "12.9.0",
"@nrwl/eslint-plugin-nx": "12.9.0",
"@nrwl/jest": "12.9.0",
"@nrwl/linter": "12.9.0",
"@nrwl/tao": "12.9.0",
"@nrwl/workspace": "12.9.0",
"@typescript-eslint/eslint-plugin": "~4.28.3",
"@typescript-eslint/parser": "~4.28.3",
"eslint": "^7.32.0",
"husky": "^4.3.8",
"jest": "27.0.3",
"typescript": "4.3.5"
}

When trying to do ng build I am getting below errors:

• Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:18:71 - error TS2503: Cannot find namespace 'ZenObservable'.

18 connectNewClients(connectionInfo: MqttConnectionInfo[], observer: ZenObservable.Observer, operation: Operation): Promise<any[]>;
~~~~~~~~~~~~~

• Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:19:68 - error TS2503: Cannot find namespace 'ZenObservable'.

19 connectNewClient(connectionInfo: MqttConnectionInfo, observer: ZenObservable.Observer, selectionNames: string[]): Promise;
~~~~~~~~~~~~~

• Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:20:67 - error TS2503: Cannot find namespace 'ZenObservable'.

20 subscribeToTopics(client: any, topics: string[], observer: ZenObservable.Observer): Promise<unknown[]>;
~~~~~~~~~~~~~

• Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:21:63 - error TS2503: Cannot find namespace 'ZenObservable'.

21 subscribeToTopic(client: any, topic: string, observer: ZenObservable.Observer): Promise;
~~~~~~~~~~~~~

• Error: node_modules/aws-appsync-subscription-link/lib/types/index.d.ts:75:15 - error TS2503: Cannot find namespace 'ZenObservable'.

75 observer: ZenObservable.SubscriptionObserver;

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
Steps provided above. Also, a sample Angular v12 app is created in https://github.com/wildbsiu/testing-aws-appsync-subscription-link-issue to reproduce the issue. Run ng build command to reproduce the error(s).

What is the expected behavior?
Above mentioned errors for type ZenObservable shouldn't come during build.

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions?
Worked in previous versions 2.x of aws-appsync-auth-link and aws-appsync-subscription-link

[VRMink]

This is also a problem for me with Angular 13

"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/flex-layout": "^13.0.0-beta.38",
"@angular/forms": "~13.2.0",
"@angular/material": "^13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"@apollo/client": "^3.0.0",
"@graphql-codegen/cli": "^2.7.0",
"apollo-angular": "^3.0.1",
"aws-appsync-auth-link": "^3.0.7",
"aws-appsync-subscription-link": "^3.1.0",
"graphql": "^16",
"lodash": "^4.17.21",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},

[dguisinger]

Any updates on this? It has stopped me dead in my tracks, I can't find a solution to this.

[dguisinger]

@wildbsiu I got it working, details to follow

[dguisinger]

In addition to the code I just made a pull request for, I had to add the following line to my Angular project's polyfills.ts

(window as any).global = window;

[NextNebula]

Big upvote, I can't upgrade to Angular 14, which requires a version of apollo-angular that depends on zen-observable-ts 1.2.5.

[iartemiev]

@dguisinger thank you for opening the PR with the fix.
Others - This issue is resolved. Please update to the latest version of this package.