You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular 9集成GraphQL与apollo-angular失败排查(NodeJS 14)

问题:Angular 9 配置 apollo-angular 出现 TS2694 错误

在基于 NodeJS 14.21.3 的 Angular 9 项目中配置 GraphQL 与 apollo-angular,运行 ng serve 时出现 TS2694 错误,提示 @angular/core 中不存在 ɵɵFactoryDeclaration 等导出成员,怀疑是版本兼容问题,寻求解决方案。


错误信息

PS C:\Users\admin\Documents\workspace\techwarelab-website\TechwareLab-Website> ng serve
Compiling @nguniversal/express-engine/tokens : es2015 as esm2015
Compiling ngx-captcha : es2015 as esm2015
Compiling ngx-owl-carousel-o : es2015 as esm2015
Compiling @nguniversal/express-engine : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 2.08 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 720 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 164 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.48 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 346 kB [initial] [rendered]
Date: 2023-09-05T07:46:26.427Z - Hash: 026293c8ba4392b60854 - Time: 27447ms

ERROR in node_modules/apollo-angular/apollo.d.ts:81:21 - error TS2694: Namespace "C:/Users/admin/Documents/workspace/techwarelab-website/TechwareLab-Website/node_modules/@angular/core/core" has no exported member 'ɵɵFactoryDeclaration'.

81     static ɵfac: i0.ɵɵFactoryDeclaration<Apollo, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
                       ~~~~~~~~~~~~~~~~~~~~
node_modules/apollo-angular/apollo.d.ts:82:22 - error TS2694: Namespace "C:/Users/admin/Documents/workspace/techwarelab-website/TechwareLab-Website/node_modules/@angular/core/core" has no exported member 'ɵɵInjectableDeclaration'.    

82     static ɵprov: i0.ɵɵInjectableDeclaration<Apollo>;
                        ~~~~~~~~~~~~~~~~~~~~~~~
node_modules/apollo-angular/apollo-module.d.ts:5:21 - error TS2694: Namespace "C:/Users/admin/Documents/workspace/techwarelab-website/TechwareLab-Website/node_modules/@angular/core/core" has no exported member 'ɵɵFactoryDeclaration'. 

5     static ɵfac: i0.ɵɵFactoryDeclaration<ApolloModule, never>;
                      ~~~~~~~~~~~~~~~~~~~~
node_modules/apollo-angular/apollo-module.d.ts:6:21 - error TS2694: Namespace "C:/Users/admin/Documents/workspace/techwarelab-website/TechwareLab-Website/node_modules/@angular/core/core" has no exported member 'ɵɵNgModuleDeclaration'.
6     static ɵmod: i0.ɵɵNgModuleDeclaration<ApolloModule, never, never, never>;
                      ~~~~~~~~~~~~~~~~~~~~~
node_modules/apollo-angular/apollo-module.d.ts:7:21 - error TS2694: Namespace "C:/Users/admin/Documents/workspace/techwarelab-website/TechwareLab-Website/node_modules/@angular/core/core" has no exported member 'ɵɵInjectorDeclaration'.
7     static ɵinj: i0.ɵɵInjectorDeclaration<ApolloModule>;
                      ~~~~~~~~~~~~~~~~~~~~~
node_modules/apollo-angular/query.d.ts:15:21 - error TS2694: Namespace "C:/Users/admin/Documents/workspace/techwarelab-website/TechwareLab-Website/node_modules/@angular/core/core" has no exported member 'ɵɵFactoryDeclaration'.        

15     static ɵfac: i0.ɵɵFactoryDeclaration<Query<any, any>, never>;
                       ~~~~~~~~~~~~~~~~~~~~
node_modules/apollo-angular/query.d.ts:16:22 - error TS2694: Namespace "C:/Users/admin/Documents/workspace/techwarelab-website/TechwareLab-Website/node_modules/@angular/core/core" has no exported member 'ɵɵInjectableDeclaration'.     

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

项目环境版本

ng --version

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
    

Angular CLI: 9.1.15
Node: 14.21.3
OS: win32 x64

Angular: 9.1.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.15
@angular-devkit/build-angular     0.901.15
@angular-devkit/build-optimizer   0.901.15
@angular-devkit/build-webpack     0.901.15
@angular-devkit/core              9.1.15
@angular-devkit/schematics        9.1.15
@angular/cdk                      9.2.4
@angular/cli                      9.1.15
@angular/material                 9.2.4
@ngtools/webpack                  9.1.15
@nguniversal/builders             9.1.1
@nguniversal/common               9.1.1
@nguniversal/express-engine       9.1.1
@schematics/angular               9.1.15
@schematics/update                0.901.15
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

package.json 依赖

"dependencies": {
    "@angular/animations": "~9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.11",
    "@angular/compiler": "~9.1.11",
    "@angular/core": "~9.1.11",
    "@angular/forms": "~9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.11",
    "@angular/platform-browser-dynamic": "~9.1.11",
    "@angular/platform-server": "~9.1.11",
    "@angular/router": "~9.1.11",
    "@apollo/client": "^3.8.2",
    "@nguniversal/express-engine": "^9.1.1",
    "animate.css": "^4.1.1",
    "aos": "^2.3.4",
    "apollo-angular": "^5.0.1",
    "bootstrap": "^4.6.0",
    "domino": "^2.1.6",
    "express": "^4.15.2",
    "graphql": "^14.0.0",
    "jquery": "^3.6.0",
    "ng6-toastr-notifications": "^1.0.4",
    "ngx-captcha": "^9.0.1",
    "ngx-owl-carousel-o": "^6.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

解决方案

核心原因

apollo-angular v5.x 版本仅支持 Angular 14 及以上版本,而当前项目使用的是 Angular 9,版本完全不兼容,导致 apollo-angular 代码中引用的 Angular 14+ 专属的 ɵɵFactoryDeclaration 等 Ivy 内部 API 在 Angular 9 中不存在。

修复步骤

  1. 卸载不兼容的依赖
    执行命令移除当前安装的高版本 apollo-angular 和 @apollo/client:

    npm uninstall apollo-angular @apollo/client
    
  2. 安装兼容版本
    安装适配 Angular 9 的 apollo-angular 2.x 版本,以及对应的 @apollo/client 和 graphql 版本:

    npm install apollo-angular@2.x @apollo/client@3.0.x graphql@15.x
    
    • apollo-angular 2.x 官方支持 Angular 8-11,完全兼容 Angular 9
    • @apollo/client 3.0.x 是与 apollo-angular 2.x 匹配的版本
    • graphql 15.x 兼容此版本组合
  3. 验证依赖版本
    打开 package.json,确认相关依赖版本已更新为兼容版本,避免版本冲突。

  4. 重新构建项目
    运行 ng serve 启动开发服务器,验证 TS2694 错误是否消失。


内容的提问来源于stack exchange,提问作者Shahid Raza

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 09:55:54