circle-progress不是一个已知元素:Angular 8

时间:2020-11-02 18:07:57

标签: angular

我正在尝试在我的角度项目中使用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>

0 个答案:

没有答案