Hi,
I started a new blank project using ionic start MyAdppName blank --type=angular
.
Then I added ng-canvas-gauges. There are some forks, I tried whith these: @mousazadeh/ng-canvas-gauges and then @grptx/ng-canvas-gauges, getting the same result from both:
ERROR TypeError: this.gauge is undefined
basicUpdate mousazadeh-ng-canvas-gauges.mjs:210
initGauge mousazadeh-ng-canvas-gauges.mjs:192
ngAfterViewInit mousazadeh-ng-canvas-gauges.mjs:144
Angular 22
RxJS 6
Angular 8
core.mjs:8416:22
Angular 13
RxJS 6
Angular 8
These error is showed in the browser console after doing ionic serve
, the gauges is showed but it is not functional.
I have imported GaugesModule in app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { GaugesModule } from '@mousazadeh/ng-canvas-gauges';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, GaugesModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
And in home.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 '@mousazadeh/ng-canvas-gauges';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
GaugesModule
],
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">
<radial-gauge width="400" height="400" [value]="20"></radial-gauge>
</ion-content>
ionic info:
Ionic:
Ionic CLI : 6.20.9 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.7.0
@angular-devkit/build-angular : 15.2.4
@angular-devkit/schematics : 15.2.4
@angular/cli : 15.2.4
@ionic/angular-toolkit : 8.1.0
Capacitor:
Capacitor CLI : 4.7.1
@capacitor/android : not installed
@capacitor/core : 4.7.1
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.7.2
System:
NodeJS : v19.8.1 (/usr/local/bin/node)
npm : 9.5.1
OS : Linux 5.19
Is it a problem related to those forks or am I doing something wrong? I need some advice.
Thanks.