Ошибка импорта ngx-диаграмм в Angular как отдельного компонента: ошибка NG8001: 'ngx-charts-tree-map' не является известным элементом - PullRequest
Новая
       43

Ошибка импорта ngx-диаграмм в Angular как отдельного компонента: ошибка NG8001: 'ngx-charts-tree-map' не является известным элементом

0 голосов
/ 26 мая 2020

Я импортировал ngx-диаграммы способом, предложенным в этой ссылке:

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>

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 (урезано, но добавлено, чтобы показать, что я также импортирую его туда: 

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.
...