title: Angular ngModules import Error
body: <p>I want to create a module related to the chart and write it elsewhere.</p>
  
  <p>The source code of module declaration is as follows.
  <br>
  <br>
  chart.module.ts</p>
  
  <pre><code>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: []
      }
    }
  }
  </code></pre>
  
  <p>I tried to load it using another module forRoot function only.</p>
  
  <p>The source for loading modules using forRoot function is:
  <br>
  <br>
  dashboard.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>However, when I use it like this, I get an error.</p>
  
  <p>Error: Template parse errors: 'cline-chart' is not a known element:</p>
  
  <p>I get an error when I try to use CLineChartComponent from a Component in the same directory as Dashboard.root.modules.</p>
  
  <p>Why this error occur?</p>
  
  <p><br>
  <br>
  <br>
  ps. i append clinechart.component.ts source.</p>
  
  <p>The source is too long, so I deleted the part related to Option.</p>
  
  <pre><code>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&lt;any&gt;,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&lt;any&gt; = [
    //this Array is Defined Line color
    ];
    // events
    public chartClicked(e: any): void {
      console.log(e);
    }
  
    public chartHovered(e: any): void {
      console.log(e);
    }
  }
  </code></pre>
  
  <p><br>
  <br>
  <br></p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { DashboardModule } from './dashboard/dashboard.module';
  
  @NgModule({
    declarations: [
    //Declare
    ],
    imports: [
      DashboardModule,
      //Import another
    ],
    providers: [
      //Porvider Anoter
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><br>
  <br></p>
  
  <p>dashboard.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><br>
  <br>
  dashboard.root.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>