Angular 9.1.0在项目路径包含软链接时编译某些包时报错,9.1.1已修正

背景

这是一个多种因素综合导致的bug,排查问题花了一些时间,特别是版本9.1.09.1.1这种小版本号的差别导致不同的运行结果容易被忽视。

某个部署环境之前的用于编译的Angular的版本是9.1.0,项目路径是硬链接。编译正常,整理存储时,改成了软链接,编译就失败了。而开发机上编译正常,改用软链接也在开发机上测试过,因此在开始调研的时候就忽视了这个问题。调查的弯路就略过了,整理一个最小重现的情况。

最小重现的排查过程

@angular/compiler-cli的版本为9.1.0是,也就是package.json中为:

"@angular/compiler-cli": "9.1.0",

运行编译命令

yarn run build

可以看到编译7个目标

						Compiling @angular/core : es2015 as esm2015
						
						Compiling @angular/common : es2015 as esm2015
						
						Compiling @angular/platform-browser : es2015 as esm2015
						
						Compiling @angular/platform-browser-dynamic : es2015 as esm2015
						
						Compiling @angular/common/http : es2015 as esm2015
						
						Compiling @angular/router : es2015 as esm2015
						
						Compiling @nguniversal/common : es2015 as esm2015

然后就是报错

    ERROR in ./node_modules/@angular/common/http/http.d.ts:2801:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
    
    This likely means that the library (@angular/common/http) which declares HttpClientModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
    
    2801 export declare class HttpClientModule {
                              ~~~~~~~~~~~~~~~~

其中IvyAngular的编译引擎,从版本9开始作为默认选项,在这里花了很长时间看文档,没有找到有针对性的资料。加之之前一直认为node_modules中只是下载的包,所以开始调查的时候没有看node_modules里面,后来比较细致调查的时候,翻看里面的文件,发现这个文件夹:

./node_modules/@angular/core/__ivy_ngcc__

这时候才注意到Ivy是把中间结果编译在这里,之前一直想当然的认为可能是在某个临时文件夹中。

然后按照编译目标逐个对照发现

./node_modules/@angular/common/__ivy_ngcc__

仅包含common

							└── fesm2015
							    ├── common.js
							    └── common.js.map

而开发机上还包含http.jshttp.js.map

						└── fesm2015
						    ├── common.js
						    ├── common.js.map
						    ├── http.js
						    └── http.js.map

少编译了一个目标,然而并没有在这个环节报错,因此在后面的环节报错时,就被误导了一直在后面绕圈。

发现问题后,就逐步缩小差异,最后定位到了@angular/compiler-cli版本,当版本为9.1.0时,报错如前所示。升级到9.1.1后,尽管只是最小的版本号,http.jshttp.js.map两个文件出现了,编译也正常了。翻了一下Angular 9.1.1的发布说明,2020年4月7日,这个时间点正好是部署环境升级到了9.1.0,而开发机后来又自动升级,因而导致结果不一致。如果两边都出错的话,也就不会这么大费周章了。

9.1.1 (2020-04-07)
Bug Fixes
compiler: avoid undefined expressions in holey array (#36343) (90cae34)
compiler: resolve enum values in binary operations (#36461) (cbc25bb), closes #35584
compiler-cli: pass real source spans where they are empty (#31805) (4894220)
core: avoid migration error when non-existent symbol is imported (#36367) (dff52ec), closes #36346
core: ngOnDestroy on multi providers called with incorrect context (#35840) (af42694), closes #35231
core: run APP_INITIALIZERs before accessing LOCALE_ID token in Ivy TestBed (#36237) (5c28af0), closes #36230
core: undecorated-classes-with-decorated-fields migration does not decorate derived classes (#35339) (5ff5a11), closes #34376
core: undecorated-classes migration should handle derived abstract classes (#35339) (a631b99)
language-service: infer type of elements of array-like objects (#36312) (ff523c9), closes #36191
language-service: use the HtmlAst to get the span of HTML tag (#36371) (ffa4e11)
ngcc: add process title (#36448) (136596d), closes /github.com/angular/angular/issues/36414#issuecomment-609644282
ngcc: allow ngcc configuration to match pre-release versions of packages (#36370) (cb0a2a0)
ngcc: correctly detect imported TypeScript helpers (#36284) (879457c), closes #36089
ngcc: correctly identify relative Windows-style import paths (#36372) (0daa488)
ngcc: correctly identify the package path of secondary entry-points (#36249) (e53b686), closes #35747
ngcc: detect non-emitted, non-imported TypeScript helpers (#36418) (93b32d3)
ngcc: do not spawn more processes than intended in parallel mode (#36280) (6ea232e), closes #35719 #36278 /github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/main.ts#L429 /github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L108 /github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L110 /github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L199
ngcc: do not write entry-point manifest outside node_modules (#36299) (bb8744d), closes #36296
ngcc: don't crash on cyclic source-map references (#36452) (56af303), closes #35727 #35757
ngcc: handle bad path mappings when finding entry-points (#36331) (7bb3588), closes #36313 #36283
ngcc: handle entry-points within container folders (#36305) (392ef93), closes #35756 #36216
ngcc: sniff main property for ESM5 format (#36396) (93cbef2), closes #35788
ngcc: support ignoring deep-imports via package config (#36423) (31eaf78), closes #35750
ngcc: support simple browser property in entry-points (#36396) (b0d680d), closes #36062
platform-server: update xhr2 dependency (#36366) (14ae3c0), closes #36358
router: state data missing in routerLink (#36462) (0e7a89a), closes #33173

最后

尽管问题解决了,但是对照了如上所述的Angular 9.1.1的发布说明,仍旧没有找到是哪条修正了这个问题。
前端是一个神奇的领域,已经开始踩当月的坑了,现在特别能理解前端同学为什么会喊学不动了。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值