将 apollo-angular V2 与 Angular V8 集成

Question

I am trying to integrate apollo-angular into my Angular project which uses Angular V8 but getting the following errors:

The apollo-angular versions im using are the following ones: "@apollo/client": "^3.4.11", "apollo-angular": "^2.6.0", and "graphql": "^15.5.3".

Also, Wondering if it is actually possible to use those apollo-angular versions with Angular V8 or would I need to upgrade to Angular V10?

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.```


```package.json
{
  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/cli": "^8.3.26",
    "@angular/common": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@apollo/client": "^3.4.11",
    "@babel/compat-data": "7.8.0",
    "@ng-bootstrap/ng-bootstrap": "^5.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/node": "~8.9.4",
    "angular-cc-library": "^2.0.1",
    "angular-disable-browser-back-button": "^1.0.2",
    "apollo-angular": "^2.6.0",
    "bn-ng-idle": "^1.0.1",
    "bootstrap": "^4.5.0",
    "bootstrap4-toggle": "^3.6.1",
    "cors": "^2.8.5",
    "font-awesome": "^4.7.0",
    "graphql": "^15.5.3",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "moment-timezone": "^0.5.31",
    "ng-bootstrap": "^1.6.3",
    "npm": "^6.14.5",
    "popper.js": "^1.16.1",
    "rxjs": "~6.4.0",
    "timers": "^0.1.1",
    "tslib": "^1.13.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular/cli": "^8.3.26",
    "@angular/compiler": "^8.2.14",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.2",
    "install": "^0.13.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "npm": "^6.14.5",
    "protractor": "^5.4.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Answer 1

I am facing same issue. Here is package from package.json file. If it need to update Angular version, then I definitely find alternatives. Update angular version and testing of all existing workflow is very costly and not possible.

 "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"
  }