ng-circle-progress is not visible in Ionic app - changing version doesnt solve the issue

[olmerosubzero]

Hi, these are my dependencies:

"dependencies": {
    "@angular/animations": "^10.2.0",
    "@angular/common": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@capacitor/android": "^2.4.2",
    "@capacitor/core": "2.4.2",
    "@capacitor/ios": "^2.4.2",
    "@ionic-native/app-preferences": "^5.29.0",
    "@ionic-native/app-rate": "^5.29.0",
    "@ionic-native/app-version": "^5.29.0",
    "@ionic-native/appsflyer": "^5.29.0",
    "@ionic-native/clipboard": "^5.29.0",
    "@ionic-native/core": "^5.29.0",
    "@ionic-native/device": "^5.29.0",
    "@ionic-native/http": "^5.29.0",
    "@ionic-native/in-app-browser": "^5.29.0",
    "@ionic-native/in-app-purchase": "^5.29.0",
    "@ionic-native/keyboard": "^5.29.0",
    "@ionic-native/market": "^5.29.0",
    "@ionic-native/open-native-settings": "^5.29.0",
    "@ionic-native/screen-orientation": "^5.29.0",
    "@ionic-native/social-sharing": "^5.29.0",
    "@ionic-native/vibration": "^5.29.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/core": "^5.4.1",
    "@ionic/pwa-elements": "^3.0.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "cordova-android": "^9.0.0",
    "cordova-clipboard": "^1.3.0",
    "cordova-ios": "^6.1.1",
    "cordova-plugin-advanced-http": "^3.1.0",
    "cordova-plugin-app-preferences": "^0.99.3",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-appsflyer-sdk": "^5.4.10",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-inapppurchase": "^1.2.0",
    "cordova-plugin-keyboard": "^1.2.0",
    "cordova-plugin-vibration": "^3.1.1",
    "cordova-plugin-whitelist": "^1.3.4",
    "es6-promise-plugin": "^4.2.2",
    "ionicons": "^5.2.3",
    "lottie-web": "^5.7.6",
    "nan": "^2.14.2",
    "ng-circle-progress": "^1.4.0",
    "ng2-tooltip-directive": "^2.9.22",
    "ngx-lottie": "^6.4.0",
    "ngx-matomo": "^0.1.4",
    "p2": "^0.7.1",
    "pixi": "^0.3.1",
    "promise-polyfill": "^8.2.0",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.6.3",
    "sw-toolbox": "3.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  }

Usage:

<circle-progress [percent]="85" [radius]="100" [outerStrokeWidth]="16" [innerStrokeWidth]="8"
                 [outerStrokeColor]="'#78C000'" [innerStrokeColor]="'#C7E596'" [animation]="true" [animationDuration]="300">
</circle-progress>

 NgCircleProgressModule.forRoot({
            radius: 100,
            outerStrokeWidth: 16,
            innerStrokeWidth: 8,
            outerStrokeColor: '#78C000',
            innerStrokeColor: '#C7E596',
            animationDuration: 300,
            lazy:false
        }),

Ng circle components is not showed,although it exists in html with 0 width and height,anyone know what can be wrong?

[cloudzard]

Hello, I successfully implemented it in Ionic 5.

Installation Command

sudo npm install ng-circle-progress --save

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 { IonicStorageModule } from '@ionic/storage';
import { NgCircleProgressModule } from 'ng-circle-progress';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot(),
    NgCircleProgressModule.forRoot({
    "backgroundPadding": -2,
    "radius": 78,
    "space": -10,
    "toFixed": 0,
    "maxPercent": 880,
    "outerStrokeGradient": true,
    "outerStrokeWidth": 11,
    "outerStrokeColor": "#3275a3",
    "outerStrokeGradientStopColor": "#0cfeff",
    "innerStrokeColor": "#e7e8ea",
    "innerStrokeWidth": 5,
    "imageHeight": 150,
    "imageWidth": 127,
    "animateTitle": false,
    "animationDuration": 1000,
    "showUnits": false,
    "showBackground": false,
    "clockwise": false,
    "startFromZero": false,
    "lazy": false})
],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Home.module.ts (this is where I'm going to use it, if it's not specified here it won't work)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

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

import { HomePage } from './home.page';

import { NgCircleProgressModule } from 'ng-circle-progress';

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

Home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <circle-progress
  [percent]="85"
  [radius]="100"
  [outerStrokeWidth]="11"
  [innerStrokeWidth]="5"
  [animation]="true"
  [animationDuration]="300"
></circle-progress>

</ion-content>

[shannsoft]

I have follow the same process but not able to integrate getting the following error in console.

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'src')
at InterestPage_Template (template.html:12)
at executeTemplate (core.js:9598)
at refreshView (core.js:9464)
at refreshComponent (core.js:10635)
at refreshChildComponents (core.js:9261)
at refreshView (core.js:9514)
at refreshEmbeddedViews (core.js:10589)
at refreshView (core.js:9488)
at refreshComponent (core.js:10635)
at refreshChildComponents (core.js:9261)