Error importing ngx-charts to Angular as separate component: error NG8001: 'ngx-charts-tree-map' is not a known element

Question

I have imported ngx-charts in the way suggested in this link:

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

However, I'd ideally like to have each chart as a separate component if I can, so I have added it as its own component which is then imported to a page, which is called tab2.

The relevant files are as follows:

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>

tree-map/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 (cut down, but added to show I am importing it there too:

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

This is the complete error I get. I am unsure why, as I am importing it in every feasible way I could be, as far as I can tell.

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

Use below commands npm install or npm i @swimlane/[email protected]

Answer 2

Late to the party but since there is no accepted answer to this question, I might as well post what solved it for me in case someone else stumbles on this problem.

For me, the problem was that I declared the "NgxChartsModule" module in my app.module.ts file and then tried to use it in another custom module. Moving the "NgxChartsModule" to the imports of my custom module solved the problem.