Amplify-js: Error: No pubsub module applied for subscription (Angular)

[andrew-aernos]

* Which Category is your question related to? *
AppSync and its generated APIService (API.service.ts)

* What AWS Services are you utilizing? *
AWS Auth
AWS API(GraphQL) with AppSync SDK

* Provide additional details e.g. code snippets *
Development environment

Angular CLI: 8.1.3
Node: 10.15.1
OS: win32 x64
Angular: 8.1.3
... cdk, cli, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@angular/animations               8.2.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

Error stacktrace

ERROR Error: Uncaught (in promise): Error: No pubsub module applied for subscription
Error: No pubsub module applied for subscription
    at APIClass.push../node_modules/@aws-amplify/api/lib/API.js.APIClass._graphqlSubscribe (API.js:615)
    at APIClass.push../node_modules/@aws-amplify/api/lib/API.js.APIClass.graphql (API.js:468)
    at new APIService (API.service.ts:1315)
    at core.js:1409
    at _callFactory (core.js:26496)
    at _createProviderInstance (core.js:26439)
    at resolveNgModuleDep (core.js:26398)
    at NgModuleRef_.get (core.js:27491)
    at injectInjectorOnly (core.js:657)
    at ɵɵinject (core.js:667)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

app.module.ts

// AWS Amplify
import { AmplifyService, AmplifyAngularModule } from 'aws-amplify-angular';
import Amplify from '@aws-amplify/core';
import aws_exports from 'src/aws-exports';

Amplify.configure(aws_exports);

@NgModule({
     ...
    imports: [AmplifyAngularModule],
    providers: [AmplifyService]
     ...
})

aws-export.ts

const awsmobile = {
    aws_project_region: 'REGION',
    aws_cognito_identity_pool_id: 'REGION:IDENT_POOL_ID',
    aws_cognito_region: 'REGION',
    aws_user_pools_id: ''REGION_USER_POOL_ID',
    aws_user_pools_web_client_id: 'CLIENT_ID',
    oauth: {},
    aws_appsync_graphqlEndpoint: 'https://ID.appsync-api.us-west-2.amazonaws.com/graphql',
    aws_appsync_region: 'REGION',
    aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS'
};

export default awsmobile;

foo.service.ts

import { APIService } from 'src/app/API.service';

@Injectable({
  providedIn: 'root'
})
export class FooService {
   constructor(private api: APIService) { }

   getFoos() : Observable<Foo[]> {
       return from(this.api.ListFoos())
         .pipe(
           map(result => result.items),
           tap(_ => this.log('fetched all foos.')),
           catchError(this.handleError<Synthesis[]>('getFoos', []))
         );
   }
   ...
}

Followed the steps for Angular at https://aws-amplify.github.io/docs/js/api#angular
The rest of the documentation is so long I feared that I might have missed some boilerplate/setup code.

[andrew-aernos]

Update

As of version 1.12.0 this issue is due to incomplete setup. I assumed Amplify.configure(awsconfig) would configure all modules. Not sure if this is the expected way to setup for now I have to include API and PubSub separately.

I made the following changes In app.module.ts (or main.ts, shouldn't matter)

Instead of

...
import Amplify from '@aws-amplify/core';
import awsconfig from 'src/aws-exports';

Amplify.configure(awsconfig);
...

Changed to

...
import Amplify from '@aws-amplify/core';
+ import PubSub from '@aws-amplify/pubsub';
+ import API from '@aws-amplify/api';
import awsconfig from 'src/aws-exports';

Amplify.configure(awsconfig);
+ PubSub.configure(awsconfig);
+ API.configure(awsconfig);
...