Errors under Ionic

[cocaybica]

Hi,

I'm trying to use ng-canvas-gauges in my Ionic 5 (capacitor) test blank page. Installed using npm install ng-canvas-gauges

Importing the module in app.module.ts gives me:

NG0304: 'radial-gauge' is not a known element:
1. If 'radial-gauge' is an Angular component, then verify that it is part of this module.
2. If 'radial-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Removing the import from app.module.ts and adding to home.module.ts gives me two errors:

ERROR TypeError: Cannot read properties of undefined (reading 'update')
    at RadialGauge$1.basicUpdate (ng-canvas-gauges.js:242)
    at RadialGauge$1.initGauge (ng-canvas-gauges.js:222)
    at RadialGauge$1.ngAfterViewInit (ng-canvas-gauges.js:158)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9535)
    at refreshComponent (core.js:10635)
    at refreshChildComponents (core.js:9261)
    at refreshView (core.js:9514)

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'nativeElement')
TypeError: Cannot read properties of undefined (reading 'nativeElement')
    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:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9479)
    at refreshComponent (core.js:10635)
    at refreshChildComponents (core.js:9261)
    at refreshView (core.js:9514)
    at renderComponentOrTemplate (core.js:9578)
    at resolvePromise (zone.js:1255)
    at resolvePromise (zone.js:1209)
    at zone.js:1321
    at ZoneDelegate.invokeTask (zone.js:434)
    at Object.onInvokeTask (core.js:28692)
    at ZoneDelegate.invokeTask (zone.js:433)
    at Zone.runTask (zone.js:205)
    at drainMicroTaskQueue (zone.js:620)

This is my app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

import { GaugesModule } from 'ng-canvas-gauges';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule, 
    GaugesModule,
    HomePageRoutingModule  
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

My home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <p>Gauges</p>
  <radial-gauge width="400" height="400"></radial-gauge>
</ion-content>

[playrobotics-alex]

Trying to achieve the same, did you manage to solve it?

[cocaybica]

Not using this. But there is a fork that it is working: https://github.com/biacsics/ng-canvas-gauges

You can read my Ionic forum post: https://forum.ionicframework.com/t/is-not-a-known-element-error/214853

[playrobotics-alex]

I did find that post and was able to setup the fork. I have another question :-) In order to update the value of the gauge dynamically I just use angular binding to update the attribute of the gauge: <radial-gauge id="gauge-ps" [attr.value]="myValueProperty"> Is there a better way to do it?