Angular 19执行ng add apollo-angular报错，求解决方案

问题场景 #

执行ng add apollo-angular时终端报错，提示找不到esnext.asynciterable、无法启用allowSyntheticDefaultImports，但根目录tsconfig.json已包含对应配置项。

解决步骤 #

1. 同步子级tsconfig配置

Angular项目中，ng add命令可能优先读取src/tsconfig.app.json（应用代码专属配置文件）而非根目录tsconfig.json。需确保该文件也包含所需配置：
打开src/tsconfig.app.json，在compilerOptions中添加/修改：

"lib": ["es2022", "dom", "esnext.asynciterable"],
"allowSyntheticDefaultImports": true

保存后重新执行ng add apollo-angular。

2. 清除Angular CLI缓存

CLI缓存可能导致配置读取异常，执行以下命令清除缓存：

ng cache clean

完成后再次尝试安装命令。

3. 手动安装并配置apollo-angular

若自动配置逻辑仍有问题，可跳过schematics手动完成：

1. 安装依赖包：

   npm install apollo-angular @apollo/client graphql
   

2. 在src/app下创建graphql.module.ts，添加Apollo客户端配置：

   import { NgModule } from '@angular/core';
   import { APOLLO_OPTIONS } from 'apollo-angular';
   import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
   import { HttpLink } from 'apollo-angular/http';
   
   const uri = 'YOUR_GRAPHQL_API_ENDPOINT'; // 替换为你的GraphQL接口地址
   
   export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
     return {
       link: httpLink.create({ uri }),
       cache: new InMemoryCache(),
     };
   }
   
   @NgModule({
     providers: [
       {
         provide: APOLLO_OPTIONS,
         useFactory: createApollo,
         deps: [HttpLink],
       },
     ],
   })
   export class GraphQLModule {}
   

3. 在app.module.ts中导入GraphQLModule：

   import { GraphQLModule } from './graphql.module';
   
   @NgModule({
     imports: [
       // ...其他导入项
       GraphQLModule
     ],
     // ...其他配置
   })
   export class AppModule {}
   

内容的提问来源于stack exchange，提问作者mkelley33