bootsoon / ng-circle-progress

A simple circle progress component created for Angular based on SVG Graphics.
https://bootsoon.github.io/ng-circle-progress/
MIT License
250 stars 85 forks source link

'circle-progress' is not a known element #128

Closed jasonworkboost closed 4 years ago

jasonworkboost commented 4 years ago

Hi I have been running into a problem I cant seem to fix. The error is that the "circle-progress" is not a known element. Any thoughts what I am doing wrong?

app.module.ts ==>

`import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { RouteReuseStrategy } from "@angular/router"; import { AngularFireModule } from "@angular/fire"; import { AngularFireAuthModule } from "@angular/fire/auth"; import { AngularFirestoreModule } from "@angular/fire/firestore";

import { IonicModule, IonicRouteStrategy } from "@ionic/angular"; import { SplashScreen } from "@ionic-native/splash-screen/ngx"; import { StatusBar } from "@ionic-native/status-bar/ngx"; import { IonicStorageModule } from "@ionic/storage";

import { environment } from "src/environments/environment"; import { AppComponent } from "src/app/app.component"; import { AppRoutingModule } from "src/app/app-routing.module";

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

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

@NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ BrowserModule, IonicModule.forRoot(), IonicStorageModule.forRoot(), AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireAuthModule, AngularFirestoreModule, AppRoutingModule, NgCircleProgressModule ], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, BarcodeScanner ], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule {}`

home.module.ts =>

`import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router';

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

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

@NgModule({ imports: [ CommonModule, FormsModule, IonicModule, RouterModule.forChild([ { path: '', component: HomePage } ]), NgCircleProgressModule ], declarations: [HomePage], schemas: [CUSTOM_ELEMENTS_SCHEMA ] }) export class HomePageModule {}`

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

jasonworkboost commented 4 years ago

SOLVED: homepage was a child, so ng-circle-progress had to imported at the parent module.ts. Works as a charm now 👍