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

I had a similar issue, which was caused by the spec.ts file. I had to add an import for the relevant NgxGraph module in the TestBed.configureTestingModule function call in the beforeEach section of the test file. E.g.,

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        NgxGraphModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });
  ...
}

I suppose whatever modules your component depends on also need to be imported in the configureTestingModule call for each test.

Answer 2

For me, although not obvious from the console output, the issue was in the .spec.ts file generated by Angular for my own component. This is a workaround rather than a fix, I guess, but I am not using the .spec.ts file anyway, so I'm not fussed.

Add this to the imports of the generated .spec.ts file:

import { NO_ERRORS_SCHEMA } from "@angular/core";

Then refer to it in the TestBed.configureTestingModule invocation:

  beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],

(etc)

Answer 3

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.

Answer 4

Use below commands npm install or npm i @swimlane/ngx-charts@13.0.4