imporove chart component

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -1,5 +1,4 @@
 import { AccountConfigModule } from '@abp/ng.account/config';
-import { ChartModule } from '@abp/ng.components/chart.js';
 import { CoreModule } from '@abp/ng.core';
 import { registerLocale } from '@abp/ng.core/locale';
 import { IdentityConfigModule } from '@abp/ng.identity/config';
@@ -32,7 +31,6 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     TenantManagementConfigModule.forRoot(),
     SettingManagementConfigModule.forRoot(),
     ThemeBasicModule.forRoot(),
-    ChartModule.forRoot()
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],

npm/ng-packs/packages/components/chart.js/src/chart.component.ts

@@ -9,7 +9,7 @@ import {
   OnChanges,
   OnDestroy,
   Output,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
 
 let Chart: any;
@@ -49,8 +49,7 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   @Output() dataSelect = new EventEmitter();
 
-  initialized: boolean
+  @Output() initialized = new EventEmitter<boolean>();
-
 
   chart: any;
 
@@ -60,7 +59,7 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
     import('chart.js/auto').then(module => {
       Chart = module.default;
       this.initChart();
-      this.initialized = true;
+      this.initialized.emit(true);
     });
   }
 
@@ -99,15 +98,15 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
       data: this.data,
       options: this.options,
     });
-  }
+  };
 
   getCanvas = () => {
     return this.el.nativeElement.children[0].children[0];
-  }
+  };
 
   getBase64Image = () => {
     return this.chart.toBase64Image();
-  }
+  };
 
   generateLegend = () => {
     if (this.chart) {
@@ -124,14 +123,13 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   reinit = () => {
     if (!this.chart) return;
-      this.chart.destroy();
+    this.chart.destroy();
-      this.initChart();
+    this.initChart();
   };
 
   ngOnDestroy() {
     if (this.chart) {
       this.chart.destroy();
-      this.initialized = false;
       this.chart = null;
     }
   }

npm/ng-packs/packages/components/chart.js/src/chart.module.ts

@@ -1,30 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { ChartComponent } from './chart.component';
 
-declare const Chart: any
-
 @NgModule({
-    imports: [CommonModule],
+  imports: [CommonModule],
-    exports: [ChartComponent],
+  exports: [ChartComponent],
-    declarations: [ChartComponent],
+  declarations: [ChartComponent],
-    providers: [],
+  providers: [],
 })
-export class ChartModule {
+export class ChartModule {}
-    static forRoot(): ModuleWithProviders<ChartModule> {
-        return {
-            ngModule: ChartModule,
-            providers: [{
-                provide: APP_INITIALIZER,
-                multi: true,
-                useFactory: (injector: Injector) => () => {
-                    import('chart.js/auto').then((module) => {
-                        console.dir(module)
-                    })
-                    return Promise.resolve()
-                },
-                deps: [Injector]
-            }]
-        }
-    }
-}