Ngx-charts: Angular 9 - Ivy compatibility

Created on 1 Nov 2019 · 22Comments · Source: swimlane/ngx-charts

Hey!

Currently enabling ivy causes following erorrs to be thrown:

:4200/vendor.js:86170 Can't bind to 'colors' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'series' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'showLabels' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'labelFormatting' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'trimLabels' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'maxLabelLength' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'activeEntries' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'innerRadius' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'outerRadius' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'explodeSlices' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'gradient' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'animations' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'tooltipDisabled' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'tooltipTemplate' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
:4200/vendor.js:86170 Can't bind to 'tooltipText' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ :4200/vendor.js:86170
core.js:14133 Can't bind to 'colors' since it isn't a known property of 'g'.
warnAboutUnknownProperty @ core.js:14133
elementPropertyInternal @ core.js:13993
ɵɵproperty @ core.js:23730
PieChartComponent_Template @ esm.js:18354
executeTemplate @ core.js:13550
refreshView @ core.js:13412
refreshComponent @ core.js:14707
refreshChildComponents @ core.js:13149
refreshView @ core.js:13466
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshComponent @ core.js:14707
refreshChildComponents @ core.js:13149
refreshView @ core.js:13466
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshComponent @ core.js:14707
refreshChildComponents @ core.js:13149
refreshView @ core.js:13466
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshComponent @ core.js:14707
refreshChildComponents @ core.js:13149
refreshView @ core.js:13466
refreshComponent @ core.js:14707
refreshChildComponents @ core.js:13149
refreshView @ core.js:13466
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshComponent @ core.js:14707
refreshChildComponents @ core.js:13149
refreshView @ core.js:13466
refreshDynamicEmbeddedViews @ core.js:14684
refreshView @ core.js:13437
refreshComponent @ core.js:14707
refreshChildComponents @ core.js:13149
refreshView @ core.js:13466
renderComponentOrTemplate @ core.js:13524
tickRootContext @ core.js:14871
detectChangesInRootView @ core.js:14906
detectChanges @ core.js:16447
tick @ core.js:42057
(anonymous) @ core.js:41905
invoke @ zone-evergreen.js:365
onInvoke @ core.js:40674
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:40486
next @ core.js:41902
schedulerFn @ core.js:36276
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36238
checkStable @ core.js:40617
onLeave @ core.js:40735
onInvokeTask @ core.js:40658
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:481
ZoneTask.invoke @ zone-evergreen.js:470
timer @ zone-evergreen.js:2535
Show 40 more frames
core.js:14133 Can't bind to 'series' since it isn't a known property of 'g'.

My guess is that you are using abstract classes which need to be decorated with @Directive() as described at https://next.angular.io/guide/migration-undecorated-classes

New Feature

Source

Enngage

👍3

Most helpful comment

I hope there is a compatibility at work, cause my organization is moving to Ivy as soon as it launches and if charts is not compatible, we will have to replace ngx-charts. 😥

blogcraft on 8 Nov 2019

👍6 😕4

All 22 comments

I get this error when i run:
ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

Error: Error on worker #2: Error: Tried to overwrite C:/Projekte//node_modules/@swimlane/ngx-charts/release/common/tooltip/injection.service.d.ts.__ivy_ngcc_bak with an ngcc back up file, which is disallowed.
    at NewEntryPointFileWriter.InPlaceFileWriter.writeFileAndBackup (C:\Projekte\\node_modules\@angular\compiler-cli\ngcc\src\writing\in_place_file_writer.js:36:23)
    at NewEntryPointFileWriter.writeFile (C:\Projekte\\node_modules\@angular\compiler-cli\ngcc\src\writing\new_entry_point_file_writer.js:63:53)
    at C:\Projekte\\node_modules\@angular\compiler-cli\ngcc\src\writing\new_entry_point_file_writer.js:45:69
    at Array.forEach (<anonymous>)
    at NewEntryPointFileWriter.writeBundle (C:\Projekte\\node_modules\@angular\compiler-cli\ngcc\src\writing\new_entry_point_file_writer.js:45:30)
    at ClusterWorker.compile (C:\Projekte\\node_modules\@angular\compiler-cli\ngcc\src\main.js:166:32)
    at Worker.<anonymous> (C:\Projekte\\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\worker.js:41:42)
    at Worker.emit (events.js:210:5)
    at process.<anonymous> (internal/cluster/worker.js:30:12)
    at process.emit (events.js:210:5)
    at ClusterMaster.onWorkerMessage (

danielehrhardt on 2 Nov 2019

Not sure whether it belongs here or should be a new entry. I have a project using ngx-charts, all working nicely, but when updating to angular 9 I get a runtime error:

core.js:6068 ERROR Error: Uncaught (in promise): Error: 'ngx-charts-chart' is not a known element:
1. If 'ngx-charts-chart' is an Angular component, then verify that it is part of this module.
2. If 'ngx-charts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Error: 'ngx-charts-chart' is not a known element:
1. If 'ngx-charts-chart' is an Angular component, then verify that it is part of this module.
2. If 'ngx-charts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    at validateElement (core.js:23156)
    at Module.ɵɵelementStart (core.js:22963)
    at BarVerticalComponent_Template (esm.js:11489)
    at executeTemplate (core.js:13684)
    at renderView (core.js:13486)
    at renderComponent (core.js:14841)
    at renderChildComponents (core.js:13291)
    at renderView (core.js:13512)
    at renderComponent (core.js:14841)
    at renderChildComponents (core.js:13291)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40964)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)

I have a simple instance of

fonzzzde on 7 Nov 2019

@fonzzzde this is not related to this issue. ngx-charts works perfectly fine with angular as long as ivy is disabled. There is likely a problem of where and how you are exporting/importing modules.

Enngage on 7 Nov 2019

I hope there is a compatibility at work, cause my organization is moving to Ivy as soon as it launches and if charts is not compatible, we will have to replace ngx-charts. 😥

blogcraft on 8 Nov 2019

👍6 😕4

It's working fine AoT enabled and Ivy if you're using the latest preview of Angular (currently: 9.0.0-rc.2)

https://github.com/angular/angular/compare/9.0.0-rc.1...9.0.0-rc.2

JensMagnus on 15 Nov 2019

@JensMagnus can you please also confirm if the tooltips are also working with IVY? In my case when I mouse over the chart, it throws below error in console:

core.js:6161 ERROR TypeError: Cannot read property 'appendChild' of undefined
    at DefaultDomRenderer2.appendChild (platform-browser.js:1065)
    at BaseAnimationRenderer.appendChild (animations.js:512)
    at InjectionService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionService.appendComponent (esm.js:2271)
    at TooltipService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionRegistery.injectComponent (esm.js:2342)
    at TooltipService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionRegistery.createByType (esm.js:2301)
    at TooltipService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionRegistery.create (esm.js:2297)
    at esm.js:2706
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:41220)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)

naveedahmed1 on 15 Nov 2019

👀1

@JensMagnus can you please also confirm if the tooltips are also working with IVY? In my case when I mouse over the chart, it throws below error in console:

core.js:6161 ERROR TypeError: Cannot read property 'appendChild' of undefined
    at DefaultDomRenderer2.appendChild (platform-browser.js:1065)
    at BaseAnimationRenderer.appendChild (animations.js:512)
    at InjectionService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionService.appendComponent (esm.js:2271)
    at TooltipService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionRegistery.injectComponent (esm.js:2342)
    at TooltipService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionRegistery.createByType (esm.js:2301)
    at TooltipService.push../node_modules/@swimlane/ngx-charts/__ivy_ngcc__/release/esm.js.InjectionRegistery.create (esm.js:2297)
    at esm.js:2706
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:41220)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)

It's broken here as well, but aesthetically it's working just fine.

Good catch 👍

JensMagnus on 18 Nov 2019

I have also seen this, however digging a bit deeper I am not sure this is an IVY issue. The undefined comes from this function. https://github.com/swimlane/ngx-charts/blob/7d4210f294459fd177eb808dbdcf147587ddbe9f/src/common/tooltip/injection.service.ts#L83-L88 which looks to be dealing with the componentRef from ApplicationRef. There are 2 potential issues I can see, ComponentRef does not have "element" https://angular.io/api/core/ComponentRef, it should be location. And hostview returns a ViewRef, which i don't believe is guaranteed to be an EmbeddedViewRef. In some quick hacking changing the function to return componentRef.location.nativeElement seems to fix it.

mitch8 on 21 Nov 2019

👍3

@marjan-georgiev can you please take a look?

naveedahmed1 on 21 Nov 2019

It's working fine AoT enabled and Ivy if you're using the latest preview of Angular (currently: 9.0.0-rc.2)

angular/[email protected]

I can also confirm that it is working on the latest version of Angular (RC-3.). I am not using all chart-types available but 4 different types and all of them are working without any errors.

It might be good to check out the migrations docs https://update.angular.io

alsami on 22 Nov 2019

@alsami it works but the tooltip is broken. Just hover over the chart points and check console log.

naveedahmed1 on 22 Nov 2019

👍1

@alsami did yu have to change anything else? I am trying to use the ngx-charts-gauge and still get Error: 'ngx-charts-chart' is not a known element: as an error message with "~9.0.0-rc.3".

Update: Updating swimlane charts from 12.0.1 to 12.1.0 helped ;) --> Solved!

FabianGosebrink on 22 Nov 2019

👍1

Update: Updating swimlane charts from 12.0.1 to 12.1.0 helped ;) --> Solved!

I noticed when building in prod-mode and AOT enabled (which you have to when using the new-lazy loaded route-style), I get the same error. In dev-mode it works fine.

alsami on 22 Nov 2019

Just to confirm "Cannot read property 'appendChild' of undefined" with tooltip failing is still an issue with 12.1.0 and angular 9.0.0-rc-3.

mitch8 on 23 Nov 2019

Update: Updating swimlane charts from 12.0.1 to 12.1.0 helped ;) --> Solved!

I noticed when building in prod-mode and AOT enabled (which you have to when using the new-lazy loaded route-style), I get the same error. In dev-mode it works fine.

So production build with "build-prod": "ng build --prod --aot", works fine for me - NOT Speaking about the tooltip, have not tried that one.

FabianGosebrink on 23 Nov 2019

Yes the only issue left is the tooltip, which is broken; rest of the charts are working fine with latest version of IVY.

naveedahmed1 on 23 Nov 2019

👍2

Hi all,

We are working on the next major release of ngx-charts, which will come with support for Ivy. There is an outstanding bug in Ivy that's preventing us to release, tracked here: https://github.com/angular/angular/issues/34171

Once this issue is resolved in Ivy, we'll be able to release.

marjan-georgiev on 2 Dec 2019

👍3

@marjan-georgiev I think the issue https://github.com/angular/angular/issues/34171 has been fixed in Angular 9.0.0-rc.5

naveedahmed1 on 4 Dec 2019

Hi @marjan-georgiev when will you release the new version? Especially fixing this problem.

mturetchi on 9 Dec 2019

Released 13.0.0. Should be compatible with Ivy now. Closing this. Please open a new issue if you notice any other problems.

marjan-georgiev on 11 Dec 2019

👍2

Released 13.0.0. Should be compatible with Ivy now. Closing this. Please open a new issue if you notice any other problems.

works perfectly fine now.

alsami on 11 Dec 2019

just aot to angular.json file
"serve": {
"options": {
"port": 4200 ,
"aot": true
}

and then restart project , it will work fine

moeali1010 on 1 Jul 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

ERROR TypeError: Cannot read property 'map' of undefined at BarVerticalComponent../src/bar-chart/bar-vertical.component.ts.BarVerticalComponent.getXDomain

edyrkaj · 3Comments

Possibility of highlight a point in line chart

NashIlli · 3Comments

Timeline is broken with ngx-charts 5.3.1

tobigit · 4Comments

Multiline pie labels

DZDomi · 4Comments

How can I make custom tooltip data dynamic?

faisalnet5 · 3Comments