CODEWITHSUNDEEP
angulartypescriptangular-module
naiad
naiad

Reputation: 157

Angular ngModules import Error

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 { }

Upvotes: 2

Views: 3196

Answers (2)

SiliconSoul
SiliconSoul

Reputation: 829

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.

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222722

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: [
  ]
})

Upvotes: 1

Related Questions