2

I want to create a module related to the chart and write it elsewhere.

The source code of module declaration is as follows.

chart.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from 'ng2-charts'

import { CLineChartComponent } from './cline-chart/cline-chart.component';
import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component';

@NgModule({
  imports: [
    CommonModule,
    ChartsModule
  ],
  declarations: [
    CLineChartComponent,
    DoughnutChartComponent    
  ],
  exports: [
    CLineChartComponent,
    DoughnutChartComponent
  ]
})
export class CustomChartModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CustomChartModule,
      providers: []
    }
  }
}

I tried to load it using another module forRoot function only.

The source for loading modules using forRoot function is:

dashboard.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';


import { CustomChartModule } from '@Library/chart.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CustomChartModule.forRoot()
  ],
  declarations: [
  ],
  exports: [
  ]
})
export class DashboardRootModule { }

However, when I use it like this, I get an error.

Error: Template parse errors: 'cline-chart' is not a known element:

I get an error when I try to use CLineChartComponent from a Component in the same directory as Dashboard.root.modules.

Why this error occur?




ps. i append clinechart.component.ts source.

The source is too long, so I deleted the part related to Option.

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'cline-chart',
  templateUrl: './cline-chart.component.html',
  styleUrls: ['./cline-chart.component.css'],
})
export class CLineChartComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  showFlag(flag:boolean){
    this.isLoad = flag;
  }

  setCLineChartData(dataSet:Array<any>,legendName:string,titleName:string){
  //this funciton is Set Data
  }

  public width: number = 230;
  public heigth: number = 100;

  public lineChartOptions: any = {
  //this Object is Chart Option
  };
  public lineChartColors: Array<any> = [
  //this Array is Defined Line color
  ];
  // events
  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }
}




app.module.ts

import { DashboardModule } from './dashboard/dashboard.module';

@NgModule({
  declarations: [
  //Declare
  ],
  imports: [
    DashboardModule,
    //Import another
  ],
  providers: [
    //Porvider Anoter
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }



dashboard.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';

import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardRootComponent } from './dashboard-root/dashboard-root.component';
import { BapIframeModule } from './../shared/bap-iframe/bap-iframe.module';
import { DashboardRootModule } from './dashboard-root/dashboard-root.module'

@NgModule({
  imports: [
    DashboardRootModule,
    CommonModule,
    FormsModule,
    DashboardRoutingModule,
    CoreModule.forRoot(),    
    BapIframeModule.forRoot()
  ],
  declarations: [
    DashboardComponent,
    DashboardRootComponent
  ],
  exports: [
    DashboardComponent,
    DashboardRootComponent
  ]
})
export class DashboardModule { }



dashboard.root.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

import { GridPanelComponent } from './grid-panel.component/grid-panel.component'
import { GridScrollComponent } from './grid-scroll.component/grid-scroll.component'

import { CustomChartModule } from '@Libarary/chart.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CustomChartModule.forRoot(),
  ],
  declarations: [
    GridPanelComponent,
    GridScrollComponent
  ],
  exports: [
    GridPanelComponent,
    GridScrollComponent
  ]
})
export class DashboardRootModule { }
5
  • post your chart line component code Commented Jul 31, 2018 at 4:10
  • Ok Wait a Second Commented Jul 31, 2018 at 4:40
  • i add my cline component source Commented Jul 31, 2018 at 4:44
  • "Component in the same directory as Dashboard.modules" . What u mean by same directory? . The component in which you want to use CLineChartComponent should be added to the declarations array in DashboardModule; Commented Jul 31, 2018 at 5:02
  • that`s mean dashboard.root.component.ts. The module and the source code are written in the same folder. There is a typo called dashboardModule. dashboardRootModule. Commented Jul 31, 2018 at 5:22

2 Answers 2

2

Where are you trying to use the chart component? If it is added to a component from the DashboardModule then you should export the CustomChartModule from the DashboardRootModule:

@NgModule({
  ...
  exports: [
    GridPanelComponent,
    GridScrollComponent,
    CustomChartModule.forRoot()
  ]
})
export class DashboardRootModule { }

If it is added to a component from the AppModule then you should also export the DashboardRootModule from the DashboardModule:

@NgModule({
  ...
  exports: [
    DashboardComponent,
    DashboardRootComponent,
    DashboardRootModule
  ]
})
export class DashboardModule { }

By the way the forRoot patterns makes sense only if you want to provide modules with and without providers.

Sign up to request clarification or add additional context in comments.

2 Comments

I really appreciate it. I did not export the CustomChartModule to Dashboard.module, but it worked by exporting it to dashboard.root.module. I have a question. CustomChartModule is only used in DashBoard.Root.Module. But why would you put it in export?
Depends in which component are you using the chart components. If the root module export worked then I assume you are using them in the DashboardComponent or in the DashboardRootComponent. This angular documentation should clarify things up: angular.io/guide/sharing-ngmodules
1

Even thought CLineChartComponent resides within the CustomChartModule , you need to import the component in the module where you going to use it. So inside DashboardModule.ts

NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CustomChartModule.forRoot()
  ],
  declarations: [
     CLineChartComponent
  ],
  exports: [
  ]
})

5 Comments

Thank you for answer. But sadly, this method is also an error. It is said that ClineChartComponent is already defined in another module.
Type CLineChartComponent is part of the declarations of 2 modules: CustomChartModule and DashboardRootModule! Please consider moving CLineChartComponent to a higher module that imports CustomChartModule and DashboardRootModule.
What this error says is that I think ClineChart is defined by the parent module. However, defining all defines in the parent module will not require ChartMoudle.
There is one questionable part. ngmodule has three levels. AppModule imports the dashboard module. Again, the dashboard module imports the dashboardRoot module. It seems that this is a problem.
Sorry. I omitted the source code because it would be inconvenient if it was lengthened. First of all, I have added everything related to the module again. Thank you :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.