circle-progress is not a known element : Angular 8

Question

I am trying to use ng-circle-progress in my angular project. In the project I am using lazy loading, where I have two modules. Core module and feature module. Core Module is lazy loaded, in core module I am holding all of my components that are required and in feature module i am holding all the third party libraries and pipes, directives.

I have imported NgCircleProgressModule in my featured module and then trying to use in a component which is part of a core module. The angular throwing this error - circle-progress' is not a known element, If 'circle-progress' is an Angular component, then verify that it is part of this module.

Plugin Link - https://www.npmjs.com/package/ng-circle-progress

This the approach I am using -

Feature Module -

import { NgModule, ModuleWithProviders } from "@angular/core";
import { CommonModule } from '@angular/common';
import { FeaturedRoutingModule } from "@/modules/featured";
import { FeaturedComponent } from "@/modules/featured";
import { NgCircleProgressModule } from 'ng-circle-progress';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
  declarations: [
    FeaturedComponent
  ],
  imports: [
    CommonModule,
    FeaturedRoutingModule,

    NgCircleProgressModule.forRoot(),
    BsDatepickerModule.forRoot(),
  ],
  exports: [
    NgCircleProgressModule,
    BsDatepickerModule,
  ],
})

export class FeaturedModule {
   static forRoot(): ModuleWithProviders {
    return {
     ngModule: FeaturedModule,
     providers: [],
   };
  }
} 

Core Module -

import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
import { CoreRoutingModule } from '@/modules/core';
import { CoreComponent } from '@/modules/core';

import { FeaturedModule } from "@/modules/featured";
import { HomeComponent } from '@core/core-components';

@NgModule({
  declarations: [
    CoreComponent,
    HomeComponent
  ],
  imports: [
    CommonModule,
    CoreRoutingModule,
    FeaturedModule,
  ],
  exports: [
    FeaturedModule
  ]
})

export class CoreModule { }

App Module -

import { FeaturedModule } from "@/Modules/featured";
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app-routing.module";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    FeaturedModule.forRoot(),
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ],
})

Home Component HTML -

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

Answer 1

If you haven't already, you should install angular-svg-progressbar and add RoundProgressModule to your imports in @NgModule.

npm install angular-svg-round-progressbar --save