MeetmeLeave / ng-canvas-gauges

Angular2 component wrapper for the canvas-gauges library written by @Mikhus(https://github.com/Mikhus/canvas-gauges).
MIT License
38 stars 23 forks source link

ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement') #37

Open OliverP10 opened 2 years ago

OliverP10 commented 2 years ago

I have followed the installation steps and I'm getting this error.

core.mjs:6494 ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at RadialGauge$1.get options [as options] (ng-canvas-gauges.js:65:1)
    at RadialGauge$1.ngOnInit (ng-canvas-gauges.js:321:37)
    at callHook (core.mjs:2551:1)
    at callHooks (core.mjs:2520:1)
    at executeInitAndCheckHooks (core.mjs:2471:1)
    at refreshView (core.mjs:9510:1)
    at refreshComponent (core.mjs:10692:1)
    at refreshChildComponents (core.mjs:9291:1)
    at refreshView (core.mjs:9545:1)
    at refreshEmbeddedViews (core.mjs:10646:1)
ERROR TypeError: Cannot read properties of undefined (reading 'update')
    at RadialGauge$1.basicUpdate (ng-canvas-gauges.js:242:1)
    at RadialGauge$1.initGauge (ng-canvas-gauges.js:222:1)
    at RadialGauge$1.ngAfterViewInit (ng-canvas-gauges.js:158:1)
    at callHook (core.mjs:2551:1)
    at callHooks (core.mjs:2520:1)
    at executeInitAndCheckHooks (core.mjs:2471:1)
    at refreshView (core.mjs:9566:1)
    at refreshComponent (core.mjs:10692:1)
    at refreshChildComponents (core.mjs:9291:1)
    at refreshView (core.mjs:9545:1)

My HTML:

<div class="display">
    <h3>{{display.type}}</h3>
</div>

<radial-gauge
    title="Speed"
    units="MPH"
    width="300"
    height="300"
    min-value="0"
    max-value="120"
    highlights='[]'
></radial-gauge>

My app.modules

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { GaugesModule } from 'ng-canvas-gauges';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { BodyComponent } from './components/body/body.component';
import { ViewSelectorComponent } from './components/view-selector/view-selector.component';
import { DisplaysComponent } from './components/displays/displays.component';
import { AddDisplayComponent } from './components/add-display/add-display.component';
import { DisplayItemGraphComponent } from './components/display-item-graph/display-item-graph.component';
import { DisplayItemLinearComponent } from './components/display-item-linear/display-item-linear.component';
import { DisplayItemRadialComponent } from './components/display-item-radial/display-item-radial.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatGridListModule} from '@angular/material/grid-list';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { DisplayItemComponent } from './components/display-item/display-item.component';
import { DisplayItemSettingsComponent } from './components/display-item-settings/display-item-settings.component';
import { environment } from 'src/environments/environment';

const config: SocketIoConfig = {
    url: environment.socketUrl, // socket server url;
    options: {
        transports: ['websocket']
    }
}

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BodyComponent,
    ViewSelectorComponent,
    DisplaysComponent,
    AddDisplayComponent,
    DisplayItemGraphComponent,
    DisplayItemLinearComponent,
    DisplayItemRadialComponent,
    DisplayItemComponent,
    DisplayItemSettingsComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatGridListModule,
    FontAwesomeModule,
    SocketIoModule.forRoot(config),
    GaugesModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
grptx commented 1 year ago

same here

jamtechdev commented 1 year ago

same here