Angular 8项目执行ng serve时css-animator相关导出缺失错误求助

问题现象 #

执行npm install后启动ng serve时，出现大量如下编译错误：

ERROR in ./node_modules/css-animator/angular/animator.module.js 8:145-163
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animation.service.js 10:149-167
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animates.directive.js 139:201-219
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animator.module.js 16:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animation.service.js 15:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animates.directive.js 144:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animates.directive.js 140:29-52
"export 'ɵɵngDeclareDirective' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animator.module.js 8:26-47
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animation.service.js 10:28-49
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animates.directive.js 139:29-50
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animation.service.js 11:29-53
"export 'ɵɵngDeclareInjectable' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animator.module.js 10:26-48
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/css-animator/angular/animator.module.js 9:26-48
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'

项目依赖配置（package.json）：

{
  "name": "next-v8.1.2-lite",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.2",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
    "apexcharts": "^3.8.0",
    "bootstrap": "^4.3.1",
    "css-animator": "^2.3.1",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "ng-click-outside": "^4.0.0",
    "ng2-validation": "^4.2.0",
    "ngx-perfect-scrollbar": "^8.0.0",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "screenfull": "^4.2.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.3",
    "@angular/cli": "^8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.30",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

问题原因 #

css-animator@2.3.1是基于Angular Ivy编译器构建的，而Angular 8并未支持Ivy（Ivy从Angular 9开始成为默认编译器）。错误中提到的ɵɵFactoryTarget、ɵɵngDeclareClassMetadata等API均为Ivy专属，Angular 8的@angular/core中不存在这些导出，导致编译失败。

解决步骤 #

1. 降级css-animator到兼容Angular 8的版本
   卸载当前版本，安装2.2.0版本（该版本基于View Engine编译，兼容Angular 8）：

   npm uninstall css-animator
   npm install css-animator@2.2.0 --save
   

2. 清理缓存并重新安装依赖

   rm -rf node_modules package-lock.json
   npm install
   

3. 重新启动项目

   ng serve
   

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