angulartypescriptangular-cliapolloapollo-client

Why does a new Angular 19 app error when executing ng add apollo-angular?

I'm trying to add apollo-angular to my Angular 19 project, but I'm getting the following output in the terminal:

We couldn't find 'esnext.asynciterable' in the list of library files
to be included in the compilation.

It's required by '@apollo/client/core' package so please add it to your tsconfig.


We couldn't enable 'allowSyntheticDefaultImports' flag.
It's required by '@apollo/client/core' package so please add it to your tsconfig.

The command I'm running after creating a new Angular 19 project is ng add apollo-angular

For reference this is my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "es2022",
    "module": "es2022",
    "lib": ["esnext", "esnext.asynciterable"],
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Screenshot of error: enter image description here

ng version shows:

Angular CLI: 19.0.4
Node: 22.12.0
Package Manager: npm 10.9.0
OS: darwin arm64

Angular: 19.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.4
@angular-devkit/build-angular   19.0.4
@angular-devkit/core            19.0.4
@angular-devkit/schematics      19.0.4
@angular/cli                    19.0.4
@schematics/angular             19.0.4
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Does anyone know how to get rid of these errors when running ng add apollo-angular?

Solution

  • The fix according to the github issues, seems to be to add esnext to the lib array of the tsconfig.json.

    ng add apollo-angular not working correctly #1485

    Cannot find name 'AsyncIterator' error in Typescript compilation process. #83

    {
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "target": "ES2022",
    "lib": ["esnext"],
    "module": "ES2022"
  },
  ...
}

    OUTPUT:

    enter image description here

    Full tsconfig.json:

    {
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "es2022",
    "module": "es2022",
    "lib": ["esnext"],
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}