core.js:14965 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.
GaugesModule is imported to 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 'ng-canvas-gauges';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, GaugesModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
I was reading some similar posts and some suggested videos (Like this: Using Custom Components on Multiple Pages in Ionic - YouTube) but I can’t make it to run without errors. The solution suggested in that video gives me the following error:
Uncaught (in promise): Error: Unexpected value 'GaugesModule' declared by the module 'ComponentsModule'. Please add a @Pipe/@Directive/@Component annotation.
Error: Unexpected value 'GaugesModule' declared by the module 'ComponentsModule'. Please add a @Pipe/@Directive/@Component annotation
This is the primary reason why I am not a fan of Ionic making lazy loading the default.
You have two options:
A. Forget about lazy loading, vaporize every NgModule in your entire app aside from AppModule, put all declarations in that AppModule. The simple code you have (importing GaugesModule in your AppModule) will work seamlessly throughout your app, even when you add new pages that want to use gauges.
B. Every time you have a page that wants to use these gauges, remember that you have to hunt for the NgModule that defines that page, and import GaugesModule into thatNgModule.
I have already tryied with solution B by importing GaugesModule into home.modules.ts like this:
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 {}
This solution 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)
You didn’t mention which specific library you’re using here, so I can only speculate that it’s this one which has many open and unaddressed issues in its tracker that look similar at a glance to what you are seeing, and indicate a lack of compatibility with Angular versions >= 9.
You may wish to investigate using this fork instead.