我正在尝试在我的角度项目中使用ng-circle-progress。在项目中,我使用延迟加载,其中有两个模块。核心模块和功能模块。核心模块是延迟加载的,在核心模块中,我持有所有必需的组件,在功能模块中,我持有所有第三方库和管道,指令。
我已经在我的特色模块中导入了NgCircleProgressModule,然后尝试在核心模块中使用的组件中使用。角度抛出此错误- 不是已知的circle-progress元素。如果'circle-progress'是Angular组件,则请验证它是否属于此模块。
插件链接-https://www.npmjs.com/package/ng-circle-progress
这是我正在使用的方法-
功能模块-
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: [],
};
}
}
核心模块-
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 { }
应用程序模块-
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
],
})
主页组件HTML-
<circle-progress
[percent]="85"
[radius]="40"
[outerStrokeWidth]="10"
[innerStrokeWidth]="8"
[outerStrokeColor]="'#78C000'"
[innerStrokeColor]="'#C7E596'"
[animation]="true"
[animationDuration]="300"
></circle-progress>