Combining Apollo-Angular Version 2 with the Latest Angular 8

Struggling to incorporate apollo-angular into my Angular project running on Angular V8, facing the below errors:

The versions of apollo-angular I am utilizing are: "@apollo/client": "^3.4.11", "apollo-angular": "^2.6.0", and "graphql": "^15.5.3".

Curious if it's viable to use these specific versions of apollo-angular with Angular V8 or if an upgrade to Angular V10 is necessary?


38 export type { QueryOptions as PureQueryOptions };
   ~~~~~~
node_modules/@apollo/client/core/types.d.ts:38:13 - error TS1005: ';' expected.

38 export type { QueryOptions as PureQueryOptions };
               ~
node_modules/@apollo/client/utilities/observables/Observable.d.ts:3:1 - error TS1128: Declaration or statement expected.

3 export type { Observer, ObservableSubscription, Subscriber, };
  ~~~~~~
node_modules/@apollo/client/utilities/observables/Observable.d.ts:3:13 - error TS1005: ';' expected.

3 export type { Observer, ObservableSubscription, Subscriber, };
              ~
node_modules/@apollo/client/utilities/observables/Observable.d.ts:3:61 - error TS1109: Expression expected.

3 export type { Observer, ObservableSubscription, Subscriber, };
                                                              ~
node_modules/ts-invariant/lib/invariant.d.ts:6:87 - error TS1144: '{' or ';' expected.

6 export declare function invariant(condition: any, message?: string | number): asserts condition;
                                                                                        ~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.
angulartypescriptgraphqlapollo-angular

Answer №1

I am encountering the same issue. Here is the package.json file with the list of dependencies. If updating the Angular version is necessary, I will explore alternative solutions. Upgrading the Angular version and testing all existing workflows can be quite costly and challenging.

 "dependencies": {
    "@angular/animations": "8.2.12",
    "@angular/common": "8.2.12",
    "@angular/compiler": "8.2.12",
    "@angular/core": "8.2.12",
    "@angular/forms": "8.2.12",
    "@angular/platform-browser": "8.2.12",
    "@angular/platform-browser-dynamic": "8.2.12",
    "@angular/platform-server": "8.2.12",
    "@angular/router": "8.2.12",
    "@apollo/client": "^3.5.7",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "apollo-angular": "^2.6.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.6.0",
    "core-js": "^3.8.3",
    "graphql": "^15.8.0",
    "jquery": "^3.5.1",
    "node-sass": "^5.0.0",
    "oidc-client": "^1.11.3",
    "popper.js": "^1.16.0",
    "protractor": "~5.4.2",
    "rxjs": "^6.6.3",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.26",
    "@angular/cli": "^8.3.29",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@types/async": "^2.0.31",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.11.6",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "typescript": "^3.5.3"
  },
  "optionalDependencies": {
    "node-sass": "^5.0.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Developing middleware for managing event handlers

Scenario: I am tasked with managing multiple events that necessitate an "available client". Therefore, in each event handler, my first step is to attempt to acquire an available client. If no client is available, I will send a "Service unavailable" messag ...

javascriptnode.jstypescript

Having difficulty constructing a GitHub package that points to a package that has already been published on GitHub

We currently have two separate repositories, each containing an Angular library. lib_a lib_b (which depends on the package lib_a) The first library, lib_a, has been built and published on GitHub packages with version 0.0.4. However, we are experiencing ...

angulargithubnpmpackage

Is there a way to delay rendering the children prop in React until after the useEffect code has executed completely? (achieving synchronous behavior)

I have been working on creating a custom axios interceptor wrapper to manage JWT tokens for my axios requests. My objective is to execute the interceptor logic first within the useEffect block and then proceed with returning the children so that the API c ...

reactjstypescriptaxiosjwt

Creating dynamic dxi-column with different data types in dxDataGrid

Our team is currently working on an angular application that involves displaying records in a dxdatagrid. The challenge we are facing includes: Different schema each time, with data coming from various tables. The need to add/edit records. Displayi ...

angulartypescriptdx-data-grid

What is the best way to invoke a function in Typescript while retrieving data?

Is it possible to run a query in my main.ts file with another ts file and then pull the result of the query into another file? If so, how can this be achieved? Here is an example from my main.ts file: async function getAllTips() { const tips: any = []; ...

javascripttypescriptfirebase-realtime-database

Setting up a reverse proxy in Angular 2: A step-by-step guide

My project setup includes: "start": "gulp serve.dev --color", In my service class, I have the following code snippet: this.mapUrl = @apiproxy return this.http.post(this.mapUrl, body, { headers: this.headers }) The Proxy.config.json file contains: { "/ ...

angularproxygulpreverse-proxy

How to set the type of an object property to a string based on a string from an array of strings in TypeScript

Great { choices: ['Bob', 'Chris', 'Alice'], selectedChoice: 'Alice', } Not So Good { choices: ['Bob', 'Chris', 'Alice'], selectedChoice: 'Sam', } I've been exp ...

typescript

Transferring information between two pages when a button is clicked in Angular

How can I display hero details on the hero-details page when clicking a button? I'm currently struggling to make it work. When I click the button, the details show up on the hero-list page, but using the routerLink doesn't display the data. I am ...

htmlangular

Issue with narrowing TypeScript arrays often encountered

When working with arrays of strings in my TypeScript code, I restrict the contents to certain letters by using a defined type like ("A" | "B")[] for letters such as A and B. However, when I have a function that takes an arbitrary array ...

arraystypescriptnarrowing

Errors occur when trying to utilize an enum as a generic type in Typescript that are not compatible

Take a look at the code snippet provided. The concept here is that I have different provider implementations that extend a base provider. Each provider requires a settings object that is an extension of a base settings object. Additionally, each provider c ...

typescript

Insert information into a 3-tiered nested Angular FormArray within interconnected dropdown fields

After trying to retrieve data from an API call to populate a select form field, I encountered difficulties setting the value correctly using a FormArray. This led me to creating a FormArray with 3 nested levels in Angular, taking reference from this examp ...

angulartypescriptangular-formsangular-reactive-forms

The Query.user must be of type Output Type, however it is currently undefined

http://localhost:4000/ when I provide the following input: { user(id: 1) { firstName } } The output I receive is: { "errors": [ { "message": "The type of Query.user must be Output Type but got: undefine ...

node.jsgraphql

Incorporate Canvg version 4 into a TypeScript project

I am currently facing an issue with an older TypeScript project that has the following tsconfig setup: { "compilerOptions": { "baseUrl": "./src", "outDir": "build/dist", "module": &q ...

typescriptwebpackcanvg

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Currently, I have a mat-select dropdown icon arrow that toggles facing up or down based on user clicks. However, after selecting an option and closing the dropdown, the arrow remains in the upward position unless further clicked and held. I have attempted ...

javascriptcssangularsassangular8

Issues with the functionality of Angular 2 routerLink

Unable to navigate from the homepage to the login page by clicking on <a routerLink="/login">Login</a>. Despite reviewing tutorials and developer guides on Angular 2 website. Current code snippet: index.html: <html> <head> ...

htmlangulartypescriptroutes

Using Selenium in Java, locate a button based on its text content: How?

I'm facing a challenge with grabbing a particular button on the page. The button has the text Search, but there are multiple buttons present. <button _ngcontent-dqg-c23="" class="cp-mat-small-btn mat-flat-button mat-accent" colo ...

javaangularseleniumxpathwebdriverwait

Where Should akitaConfig Be Placed in Angular Development?

Despite my attempt to place akitaConfig directly in the constructor of my app.component.ts file, I am encountering issues with it not properly configuring the data stores created afterwards. My goal is to set resettable to be universally true. Currently, t ...

angularangular-akitaakita

Leveraging the Image data type in SQL Server to showcase images in an Angular 2.0 environment, with the response handled by Express

I am receiving the following response from Express and I am looking to display the supertendentsSignature image in Angular 2. Database: SQL Server Dataytpe : Image ORM: Sequelize Datatype of SuperintendentsSignature column is Blob Framework : Express Fro ...

sql-servernode.jsangularexpress

The bespoke node package does not have an available export titled

No matter what I do, nothing seems to be effective. I have successfully developed and launched the following module: Index.ts : import ContentIOService from "./IOServices/ContentIOService"; export = { ContentIOService: ContentIOService, } ...

javascripttypescriptnpmnode-modules

Obtain a value that is not defined

Good day, I am encountering an issue with my data not accepting an undefined value. Below is the code snippet: interface IModalContatos { dados: IContatos; onSave(dados: IContatos): void; onClose(): void; } When passing this data to my modal, I rece ...

reactjstypescriptmaterial-ui