ng-circle-progress is not visible in Ionic app

[5ocjal]

I am working on an application made with Ionic Framework and want to use ng-circle-progress to show time in a component.

I installed it with -> npm i ng-circle-progress

In my app.module.ts it is imported as below:

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

  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgCircleProgressModule.forRoot({
      // set defaults here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: '#9D4EDD',
      innerStrokeColor: '#a760e0',
      animationDuration: 300,
      responsive: false,
      renderOnClick: false,
      lazy: false,
    }),   ],

In my component.html template its looks like this:

<ion-content [fullscreen]="true">

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

</ion-content>

My package.json is:

"dependencies": {
    "@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/core": "2.4.4",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "ng-circle-progress": "^1.6.0",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@capacitor/cli": "2.4.4",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },

And ionic info from my terminal:

Ionic:

   Ionic CLI                     : 6.12.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.1
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Utility:

   cordova-res : 0.15.2
   native-run  : not installed

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Big Sur

There is no error in Chrome DevTools, app is running fine, but circle-progress is not rendered in app at all.

Is this could be a problem with Ionic/Angular version or did I made a mistake with config?

[kesavanpos]

Downgrade ng-circle-progress version to 1.4.0 and see if it works

[5ocjal]

Thank you, it works!

Strange thing cus I've downgrade to 1.40 and it started to work, than upgrade to the latest version and it's still works fine.

[olmerosubzero]

I also has this issue, changing version didn't work for me? Do you know what else can be wrong?