title: Error importing ngx-charts to Angular as separate component: error NG8001: 'ngx-charts-tree-map' is not a known element
body: <p>I have imported ngx-charts in the way suggested in this link:</p>
  
  <p><a href="https://stackblitz.com/edit/swimlane-tree-map-chart?embed=1&amp;file=app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/swimlane-tree-map-chart?embed=1&amp;file=app/app.component.ts</a></p>
  
  <p>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.</p>
  
  <p>The relevant files are as follows:</p>
  
  <p>tree-map/tree-map.component.html:</p>
  
  <pre><code>&lt;ngx-charts-tree-map
    [view]="view"
    [scheme]="colorScheme"
    [results]="single"
    [gradient]="gradient"
    [animations]="animations"
    [labelFormatting]="labelFormatting"
    (select)="onSelect($event)"&gt;
  &lt;/ngx-charts-tree-map&gt;
  </code></pre>
  
  <p>tree-map/tree-map.component.ts</p>
  
  <pre><code>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`;
    }
  }
  </code></pre>
  
  <p>tab2.page.ts</p>
  
  <pre><code>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
    ) {
  
    }
  
  }
  
  </code></pre>
  
  <p>tab2.module.ts</p>
  
  <pre><code>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() { }
  }
  </code></pre>
  
  <p>tab2.page.html</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title&gt;
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;app-tree-map&gt;&lt;/app-tree-map&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>App.module.ts (cut down, but added to show I am importing it there too:</p>
  
  <pre><code>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]
  })
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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.
  </code></pre>