Angular build error "export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core"

Question

I am trying to stand up an Angular application that takes advantage of clarity UI. I am currently using Angular version 10.1.1. After installing/adding clarity, I get the following errors when trying to build.

ERROR in ./node_modules/@clr/angular/esm2015/utils/animations/expandable-animation/expandable-animation.js 33:8-43
"export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/@clr/angular/esm2015/utils/animations/expandable-animation/expandable-animation.js 35:8-39
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'i0') was not found in '@angular/core'

ERROR in ./node_modules/@clr/angular/esm2015/utils/drag-and-drop/draggable-ghost.js 96:8-39
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'i0') was not found in '@angular/core'

I done some playing around with versions thinking it could possibly be a bug in the newer versions, but to no avail. Here is my package.json

{
  "name": "my-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.1",
    "@angular/cli": "^10.1.1",
    "@angular/common": "~10.1.1",
    "@angular/cdk": "~10.1.1",
    "@angular/compiler": "~10.1.1",
    "@angular/compiler-cli": "^10.1.1",
    "@angular/core": "~10.1.1",
    "@angular/forms": "~10.1.1",
    "@angular/platform-browser": "~10.1.1",
    "@angular/platform-browser-dynamic": "~10.1.1",
    "@angular/router": "~10.1.1",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "typescript": "~3.9.7",
    "zone.js": "~0.10.2",
    "@clr/angular": "4.0.0-rc.1",
    "@clr/ui": "4.0.0-rc.1",
    "@clr/icons": "4.0.0-rc.1",
    "@webcomponents/webcomponentsjs": "^2.0.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.1",
    "@angular/cli": "^10.1.1",
    "@angular/compiler-cli": "^10.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },
  "engines": {
    "node": "12.18.3",
    "npm": "6.14.6"
  }
}

I am also deploying this to Heroku, but don't think that is the problem here. I had it correctly working before adding clarity. Plus, I currently can't deploy because my build is failing.

Answer 1

By looking at the clarity repo, there seems to be problems with the 4.0.0-rc.1 version.

Refer to this issue

Try to upgrade the version to the released one. I would also suggest you remove the node_modules folder before doing it.