canvas ElementRef undefined within Angular 9 application

[jrdutton]

Have updated my application to Angular 9.

Making use of the radial gauge.

Seeing this error:

DamageGaugeComponent.html:2 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at RadialGauge$1.get options [as options] (ng-canvas-gauges.js:62)
at RadialGauge$1.ngOnInit (ng-canvas-gauges.js:305)
at checkAndUpdateDirectiveInline (core.js:32904)
at checkAndUpdateNodeInline (core.js:45701)
at checkAndUpdateNode (core.js:45640)
at debugCheckAndUpdateNode (core.js:46663)
at debugCheckDirectivesFn (core.js:46606)
at Object.eval [as updateDirectives] (DamageGaugeComponent.html:2)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:46594)
at checkAndUpdateView (core.js:45605)

It appears that the protected canvas: ElementRef; is not being set and is therefore undefined.

I'm wondering whether this needs to be updated to use the new static flag with ViewChild.

[gkujawsk]

Almost the same here.
core.js:5873 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at RadialGauge$1.get options [as options] (ng-canvas-gauges.js:65)
at RadialGauge$1.ngOnInit (ng-canvas-gauges.js:321)
at callHook (core.js:3937)
at callHooks (core.js:3901)
at executeInitAndCheckHooks (core.js:3842)
at refreshView (core.js:11795)
at refreshComponent (core.js:13217)
at refreshChildComponents (core.js:11508)
at refreshView (core.js:11829)
at refreshComponent (core.js:13217)

[jrdutton]

I tried to fix this by forking the project and upgrading to Angular 9, but just couldn't get it to compile locally. So I resorted to pulling in the files into my project, The only change I needed to make to get it working with Angular 9 was changing this line in the Base Guage class...

@ViewChild('gauge', { static: true })
protected canvas: ElementRef;

This means that it is resolved before change detection runs so is not undefined within ngOnInit (the location of the problem). By default, static is set to false, so you'd need to move the ngOnInit code into ngAfterViewInit.

Hope this helps. It worked for me in the interim.

[biacsics]

I updated the Code to Angular 9.x But i need help now to publish my changes ...

Package Version

@angular-devkit/architect 0.901.3
@angular-devkit/build-angular 0.901.3
@angular-devkit/build-ng-packagr 0.901.3
@angular-devkit/build-optimizer 0.901.3
@angular-devkit/build-webpack 0.901.3
@angular-devkit/core 9.1.3
@angular-devkit/schematics 9.1.3
@ngtools/webpack 9.1.3
@schematics/angular 9.1.3
@schematics/update 0.901.3
ng-packagr 9.1.1
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

[biacsics]

in the meanwhile you can download the Version for angular 9.x on..

https://www.npmjs.com/package/@biacsics/ng-canvas-gauges

https://github.com/biacsics/ng-canvas-gauges

[rajeevshukla]

@biacsics ,

Did you check if the animation is working fine in Angular 9.0? I am using Angular 10 I encounter the same issue, So I used your version of it and worked. But seems like animation is still broken.

[cocaybica]

@biacsics

Hey

I was trying to install your fork but there are some dependencies errors:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/tslib
npm ERR!   tslib@"^2.3.1" from the root project
npm ERR!   tslib@"^2.2.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/common
npm ERR!     @angular/common@"~12.1.1" from the root project
npm ERR!     peer @angular/common@">=9.0.0" from @biacsics/[email protected]
npm ERR!     node_modules/@biacsics/ng-canvas-gauges
npm ERR!       @biacsics/ng-canvas-gauges@"*" from the root project
npm ERR!   2 more (@angular/core, zone.js)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer tslib@"^1.10.0" from @biacsics/[email protected]
npm ERR! node_modules/@biacsics/ng-canvas-gauges
npm ERR!   @biacsics/ng-canvas-gauges@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

Ionic info:

Ionic:

   Ionic CLI                     : 6.17.1 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.7.0
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.2.5
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.2.2
   @capacitor/android : not installed
   @capacitor/core    : 3.2.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.1

System:

   NodeJS : v14.17.6 (/usr/bin/node)
   npm    : 7.23.0
   OS     : Linux 5.11