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

Question

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:

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?

Note that I've done all of the things mentioned in the error message, and I still get the same error messages. — mkelley33
– mkelley33, Commented Dec 11, 2024 at 1:24

Naren Murali · Accepted Answer · 2024-12-11 13:43:40Z

2

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:

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

edited Dec 11, 2024 at 13:43

answered Dec 11, 2024 at 6:59

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mkelley33 Dec 11, 2024 at 12:21

Thank you Naren! That answers half the question but I'm still getting one error message even though I've set allowSyntheticDefaultImports in my tsconfig.json. "We couldn't enable 'allowSyntheticDefaultImports' flag. It's required by '@apollo/client/core' package so please add it to your tsconfig."

Naren Murali Dec 11, 2024 at 12:22

@mkelley33 I think we can add this to tsconfig.json, but after doing this change the error wen't away for me, are you still not able to install apollo-angular? because it got installed for me

mkelley33 Dec 11, 2024 at 12:25

Strangely enough when I removed the allowSyntheticDefaultImports from tsconfig, and I ran ng add apollo-angular, it put that flag in my tsconfig along with the libs, but now I'm getting the error about asynciterable again.

Naren Murali Dec 11, 2024 at 12:27

@mkelley33 Firstly make sure you have esnext added to lib array, as well as allowSyntheticDefaultImports added, then run npm cache clean --force to clean the cache then try adding again, you can also delete the .angular folder if present for additional safety.

mkelley33 Dec 11, 2024 at 12:33

@nareen-murali I tried all of that but still get both errors even with my tsconfig having esnext in libs and allowSyntheticDefaultImports set to true.

|

pawel wujczyk · Accepted Answer · 2025-06-25 19:16:38Z

1

After adding lines that were described here I still received an error.

I dig somewhere that in fact you need to delete some of them.

For me it was failing when I had a config:

  "compilerOptions": {
    ....
    "module": "es2022",
    "lib": [
      "esnext",
      "esnext.asynciterable"
    ],
    "allowSyntheticDefaultImports": true
  },

I need to remove lines:

"esnext.asynciterable"
"allowSyntheticDefaultImports": true

Then command added back the missing items and succed.

answered Jun 25 at 19:16

pawel wujczyk

5383 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

OUTPUT:

Full tsconfig.json:

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

OUTPUT:

Full tsconfig.json:

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related