Angular ngModules 导入错误

Question

我想创建一个与图表相关的模块并将其写在其他地方。

模块声明的源代码如下。

图表.模块.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: []
    }
  }
}

我尝试仅使用另一个模块 forRoot 函数来加载它。

使用forRoot函数加载模块的源码是:

仪表板.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 { }

但是，当我这样使用它时，出现错误。

错误:模板解析错误:“cline-chart”不是已知元素:

当我尝试从与 Dashboard.root.modules 位于同一目录中的组件中使用 CLineChartComponent 时，出现错误。

为什么会出现这个错误？

附:我附加 clinechart.component.ts 源代码。

源码太长，所以我删除了与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 { }

仪表板.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 { }

仪表板.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 { }

Answer 1

您想在哪里使用图表组件？如果将其添加到 DashboardModule 中的组件，那么您应该从 DashboardRootModule 导出 CustomChartModule:

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

如果将其添加到 AppModule 中的组件，那么您还应该从 DashboardModule 导出 DashboardRootModule:

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

顺便说一下，只有当您想提供带有或不带有提供程序的模块时，forRoot 模式才有意义。