Angular 9默认启用的Ivy在使用HttpClientModule时将导致编译失败

TL;DR

编辑./tsconfig.json，在angularCompilerOptions中添加"enableIvy": false，相关部分代码如下所示。

  "angularCompilerOptions": {
    "enableIvy": false
  }

最小重现步骤

进入父文件夹

cd /Users/huzhenghui/OneDrive/Angular/Angular-Reproduce

创建项目

ng new --skip-git --skip-install --package-manager yarn --create-application="false" angular-httpclientmodule-ivy

进入项目文件夹

cd angular-httpclientmodule-ivy

查看项目文件夹

tree -a -Q --sort=size -A -C $(pwd)

全部文件为

"/Users/huzhenghui/OneDrive/Angular/Angular-Reproduce/angular-httpclientmodule-ivy"
├── "tslint.json"
├── "package.json"
├── "README.md"
├── ".gitignore"
├── "tsconfig.json"
├── ".editorconfig"
└── "angular.json"

0 directories, 7 files

安装依赖包

yarn --verbose

创建应用程序

ng generate --routing --style styl application angular-httpclientmodule-ivy

测试路径解析

yarn run tsc --traceResolution

可以看到TypeScript的路径解析正确。

测试运行

yarn run start --open

可以看到默认页面

引用HttpClientModule

编辑应用程序模块文件./projects/angular-httpclientmodule-ivy/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    HttpClientModule,

    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

其中只增加两行，引入模块类。

import { HttpClientModule } from '@angular/common/http';

在AppModule中引入模块类。

  imports: [
    HttpClientModule,
  ],

再次运行

yarn run start

出现如下错误

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 {
                          ~~~~~~~~~~~~~~~~

手动解决方法

编辑./tsconfig.json，在angularCompilerOptions中添加"enableIvy": false，相关部分代码如下所示。

  "angularCompilerOptions": {
    "enableIvy": false
  }

命令行解决方法

需要安装有jq命令。

temp=$(mktemp) && jq '.angularCompilerOptions.enableIvy = false' ./tsconfig.json > ${temp} && cp ${temp} ./tsconfig.json