angular - 将 ngx-charts 作为单独组件导入 Angular 时出错 : error NG8001: 'ngx-charts-tree-map' is not a known element

Question

我已经按照此链接中建议的方式导入了 ngx-charts:

https://stackblitz.com/edit/swimlane-tree-map-chart?embed=1&file=app/app.component.ts

但是，如果可以的话，我理想地希望将每个图表作为单独的组件，因此我将其添加为自己的组件，然后将其导入到称为 tab2 的页面。

相关文件如下:

tree-map/tree-map.component.html:

<ngx-charts-tree-map
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [animations]="animations"
  [labelFormatting]="labelFormatting"
  (select)="onSelect($event)">
</ngx-charts-tree-map>

TreeMap /tree-map.component.ts

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { single } from './data';

@Component({
  selector: 'app-tree-map',
  templateUrl: './tree-map.component.html',
  styleUrls: ['./tree-map.component.css']
})
export class TreeMapComponent {
  single: any[];
  view: any[] = [700, 400];

  // options
  gradient: boolean = false;
  animations: boolean = true;

  colorScheme = {
    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
  };

  constructor() {
    Object.assign(this, { single });
  }

  onSelect(event) {
    console.log(event);
  }

  labelFormatting(c) {
    return `${(c.label)} Population`;
  }
}

tab2.page.ts

import { Component } from '@angular/core';
import { DatabaseService, Emotions } from './../services/database.service';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { TreeMapComponent } from './../components/tree-map/tree-map.component';


@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  constructor(
    private db: DatabaseService
  ) {

  }

}

tab2.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab2Page } from './tab2.page';
import { Component } from '@angular/core';
import * as moment from 'moment';
import { DatabaseService, Emotions } from './../services/database.service';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab2Page }]),
    NgxChartsModule,
    BrowserAnimationsModule,
    BrowserModule
  ],
  declarations: [Tab2Page],
  bootstrap: [ Tab2Page ]
})
export class Tab2PageModule {
  arr: String;
  constructor() { }
}

tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <app-tree-map></app-tree-map>
</ion-content>

App.module.ts(删减，但添加以表明我也将其导入到那里:

import { NgxChartsModule} from '@swimlane/ngx-charts'
@NgModule({
  declarations: [AppComponent, ModalComponent],
  entryComponents: [ModalComponent],
  imports: [BrowserModule,
    BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule, MatDialogModule, HttpClientModule, FormsModule, NgxChartsModule],
  providers: [
    StatusBar,
    SplashScreen,
    MatButtonModule,
    MatDialogModule,
    SQLite,
    SQLitePorter
  ],
  bootstrap: [AppComponent]
})

这是我得到的完整错误。我不确定为什么，因为据我所知，我正在以各种可行的方式导入它。

ERROR in src/app/components/tree-map/tree-map.component.html:1:1 - error NG8001: 'ngx-charts-tree-map' is not a known element:
1. If 'ngx-charts-tree-map' is an Angular component, then verify that it is part of this module.
2. If 'ngx-charts-tree-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Answer 1

迟到了，但由于这个问题没有公认的答案，我不妨发布为我解决的问题，以防其他人偶然发现这个问题。

对我来说，问题是我在 app.module.ts 文件中声明了“NgxChartsModule”模块，然后尝试在另一个自定义模块中使用它。 将“NgxChartsModule”移至我的自定义模块的导入解决了问题。