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 中不存在。
修复步骤
卸载不兼容的依赖
执行命令移除当前安装的高版本 apollo-angular 和 @apollo/client:npm uninstall apollo-angular @apollo/client安装兼容版本
安装适配 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 兼容此版本组合
验证依赖版本
打开 package.json,确认相关依赖版本已更新为兼容版本,避免版本冲突。重新构建项目
运行ng serve启动开发服务器,验证 TS2694 错误是否消失。
内容的提问来源于stack exchange,提问作者Shahid Raza
相关产品推荐
相关产品推荐

