search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.42k stars 761 forks source link

export ɵɵsyntheticHostListener (imported as 'ɵngcc0') was not found in @angular/core #5041

Closed jmls closed 4 years ago

jmls commented 4 years ago

Describe the bug

cannot build my angular application if it uses clarity

How to reproduce

ng build on my application (closed source)

Expected behavior

can build and run application

Versions

App

Device:

Additional notes

when building the app with "ng serve" I get the following errors



ERROR in ./node_modules/@clr/angular/__ivy_ngcc__/fesm2015/clr-angular.js 13232:8-38
"export 'ɵɵsyntheticHostListener' (imported as 'ɵngcc0') was not found in '@angular/core'

ERROR in ./node_modules/@clr/angular/__ivy_ngcc__/fesm2015/clr-angular.js 12546:8-38
"export 'ɵɵsyntheticHostProperty' (imported as 'ɵngcc0') was not found in '@angular/core'

ERROR in ./node_modules/@clr/angular/__ivy_ngcc__/fesm2015/clr-angular.js 13234:8-38
"export 'ɵɵsyntheticHostProperty' (imported as 'ɵngcc0') was not found in '@angular/core'```
jmls commented 4 years ago

I think this is related to #4844

bdryanovski commented 4 years ago

Hey @jmls thanks for reporting this, can you provide some steps to reproduce? Is Ivy enabled or not?

It has to be solved by these changes https://github.com/vmware/clarity/pull/4830 here.

jmls commented 4 years ago

I think I've upgraded from angular 10.0.4 to 10.0.14 (application compiled just fine up to today)

Let me make this clear - I am not building clarity - I'm trying to build my app .. so it's the compiled @clr/angular libs that I've got with yarn add @clr/angular that seem to be causing the problem.

I think ivy is the default with angular 10

Is there an Ivy AOT-compiled bundle of clarity for Angular version 10 ?

So I'm not sure that the steps in 4830 apply to this scenario

jmls commented 4 years ago

if I downgrade to 10.0.2 (yarn add @angular/{common,compiler,compiler-cli,core,forms,platform-browser,platform-browser-dynamic,platform-server,router,animations}@10.0.2) then the application builds correctly

So, it's a problem with the angular version and clarity

bdryanovski commented 4 years ago

It seems to work at least for me ...

❯ ng new fakeapp
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE fakeapp/README.md (1025 bytes)
CREATE fakeapp/.editorconfig (274 bytes)
CREATE fakeapp/.gitignore (631 bytes)
CREATE fakeapp/angular.json (3574 bytes)
CREATE fakeapp/package.json (1250 bytes)
CREATE fakeapp/tsconfig.base.json (458 bytes)
CREATE fakeapp/tsconfig.json (426 bytes)
CREATE fakeapp/tslint.json (3184 bytes)
CREATE fakeapp/.browserslistrc (853 bytes)
CREATE fakeapp/karma.conf.js (1019 bytes)
CREATE fakeapp/tsconfig.app.json (292 bytes)
CREATE fakeapp/tsconfig.spec.json (338 bytes)
CREATE fakeapp/src/favicon.ico (948 bytes)
CREATE fakeapp/src/index.html (293 bytes)
CREATE fakeapp/src/main.ts (372 bytes)
CREATE fakeapp/src/polyfills.ts (2835 bytes)
CREATE fakeapp/src/styles.css (80 bytes)
CREATE fakeapp/src/test.ts (753 bytes)
CREATE fakeapp/src/assets/.gitkeep (0 bytes)
CREATE fakeapp/src/environments/environment.prod.ts (51 bytes)
CREATE fakeapp/src/environments/environment.ts (662 bytes)
CREATE fakeapp/src/app/app.module.ts (314 bytes)
CREATE fakeapp/src/app/app.component.css (0 bytes)
CREATE fakeapp/src/app/app.component.html (25725 bytes)
CREATE fakeapp/src/app/app.component.spec.ts (945 bytes)
CREATE fakeapp/src/app/app.component.ts (211 bytes)
CREATE fakeapp/e2e/protractor.conf.js (869 bytes)
CREATE fakeapp/e2e/tsconfig.json (299 bytes)
CREATE fakeapp/e2e/src/app.e2e-spec.ts (640 bytes)
CREATE fakeapp/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
❯ cd fakeapp
❯ ng add @clr/angular
Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE package.json (1377 bytes)
UPDATE angular.json (3935 bytes)
UPDATE src/app/app.module.ts (488 bytes)
✔ Packages installed successfully.

❯ npm run start

> fakeapp@0.0.0 start /Users/bdryanovski/tmp/fakeapp
> ng serve

Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @clr/angular : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 58.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 781 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.29 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.67 MB [initial] [rendered]
Date: 2020-09-15T10:38:57.926Z - Hash: 47c02eee9dda86d6f758 - Time: 7888ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Date: 2020-09-15T10:38:58.611Z - Hash: 47c02eee9dda86d6f758
6 unchanged chunks

Time: 399ms
: Compiled successfully.
❯ cat package.json
{
  "name": "fakeapp",
  "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": "~10.0.5",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/forms": "~10.0.5",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "@clr/angular": "4.0.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3",
    "@clr/ui": "4.0.1",
    "@clr/icons": "4.0.1",
    "@webcomponents/webcomponentsjs": "^2.0.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.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": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

We gonna need some more information about it to be able to help ?

jmls commented 4 years ago

see my last comment ;)

jmls commented 4 years ago

ok, so now very odd - after the yarn add @angular/{common,compiler,compiler-cli,core,forms,platform-browser,platform-browser-dynamic,platform-server,router,animations}@<version> I'm now not getting any errors at all ...

bdryanovski commented 4 years ago

We had an issue with 4.0.0-rc.1 so you may have some cached build somewhere... !?

Can you confirm me that everything is ok on your side so I could close the issue?

jmls commented 4 years ago

maybe it was cached - but I removed node_modules several times ;)

However, it's now working fine on my end - thanks for the help.

github-actions[bot] commented 4 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.