"Angular structure loaded both synchronously and asynchronously" error while setting up graphql apollo client in Angular

Question

I am getting Angular structure loaded both synchronously and asynchronously error during apollo-client setup in angular. I tried all answers available in stackoverflow, still no luck. Need help here. Attached are the pieces of code used. I am getting error during code compilation. Once it is resolved, I should be able to get the console outputs. The query with api works fine, have checked in Postman. Only need to resolve the compilation error. The apollo client setup is as per the official documentation. https://apollo-angular.com/docs/get-started

cp-shared-lib-module.ts
------------------------
import { ProfileNameComponent } from './shared-features/profile-name/profile-name.component';
import { ProfileSummaryComponent } from './shared-features/profile-summary/profile- 
summary.component';

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule } from '@ngx-translate/core';
import { HttpResponseInterceptor } from './shared-services/response-interceptor/http-response-
import { GraphiComponent } from './graphi/graphi.component';
import { GraphService } from './graphi/graphi.service';
import { APOLLO_OPTIONS, ApolloModule, Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    ApolloModule,
    HttpClientModule,
    TranslateModule.forChild({ extend: true }),
  ],
  declarations: [
    GraphiComponent
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpResponseInterceptor,
      multi: true,
    },
    {
      provide: APOLLO_OPTIONS,
      useFactory(httpLink: HttpLink) {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
          uri: 'https://grahphqldemo-dit.r3.pcf.dell.com/graphql',
          }),
        };
      },
      deps: [HttpLink],
    },
    GraphService
   ],
   exports: [
    GraphiComponent
  ],  
})
export class CpSharedLibModule {}

graphi.component.ts
--------------------
import { Component, OnInit } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { GraphService } from './graphi.service';
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'lib-graphi',
  templateUrl: './graphi.component.html',
  styleUrls: ['./graphi.component.css']
})
export class GraphiComponent implements OnInit {

  name: string;
  id: number;
  currency: string;
  querySubscription: Subscription;
  query_data = gql`
  {
    bankAccount{
      name
      id
      currency
  }
  }
  `;
  constructor(private graphService: GraphService,
              private apollo: Apollo
    ) { }

  ngOnInit(): void {
    this.querySubscription = this.apollo.watchQuery({
      query: this.query_data
    })
    .valueChanges.subscribe((response: any) => {
      if(response) {
        this.name = response.data.bankAccount.name;
        this.id = response.data.bankAccount.id;
        this.currency = response.data.bankAccount.currency;
        console.log(this.id, this.name, this.currency);
      }
      else {
        console.log('error for gql');
      }
    })
  }
  ngOnDestroy() {
    this.querySubscription.unsubscribe();
  }

}