I want to display a graph.

In the chartponent.ts file I wrote the data for plotting the graph:

import { Component, OnInit } from '@angular/core';
import { PlotlyModule } from 'angular-plotly.js';
import * as PlotlyJS from 'plotly.js/dist/plotly.js';


PlotlyModule.plotlyjs = PlotlyJS;



@Component({
  selector: 'app-element',
  templateUrl: './elementponent.html',
  styleUrls: ['./elementponent.scss']
})
export class ElementComponent implements OnInit {

      public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
    };

  constructor() { }

  ngOnInit(): void {
  }

} The html looks like this:

<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>

Then I want to render this graph in another ponent. I create a dashboardponent.ts

<app-element></app-element>

Then when I try ng serve

An error occurs:

If 'app-heatmap' is an Angular ponent, then verify that it is part of this module. 2. If 'app-element' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this ponent to suppress this message.

2 <app-element></app-element>

Seems I forgot one step?

I want to display a graph.

In the chart.ponent.ts file I wrote the data for plotting the graph:

import { Component, OnInit } from '@angular/core';
import { PlotlyModule } from 'angular-plotly.js';
import * as PlotlyJS from 'plotly.js/dist/plotly.js';


PlotlyModule.plotlyjs = PlotlyJS;



@Component({
  selector: 'app-element',
  templateUrl: './element.ponent.html',
  styleUrls: ['./element.ponent.scss']
})
export class ElementComponent implements OnInit {

      public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
    };

  constructor() { }

  ngOnInit(): void {
  }

} The html looks like this:

<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>

Then I want to render this graph in another ponent. I create a dashboard.ponent.ts

<app-element></app-element>

Then when I try ng serve

An error occurs:

If 'app-heatmap' is an Angular ponent, then verify that it is part of this module. 2. If 'app-element' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this ponent to suppress this message.

2 <app-element></app-element>

Seems I forgot one step?

• javascript
• angular
• typescript
• plotly

• 1 Are you declaring that ponent in a declarations on a @NgModule any where? – Taplar Commented Aug 26, 2020 at 19:31
• 1 The error is indicates that there's some other ponent that's causing the issue, not the one you've displayed. Is there another ponent with a selector called "app-heatmap" that you haven't declared in a module? – spots Commented Aug 26, 2020 at 19:33
• 1 I'm pretty sure you forget declare your ponent in the main.module, see the docs about modules: angular.io/guide/ngmodules – Eliseo Commented Aug 26, 2020 at 19:35
• 1 @Eden1998 make sure you have added ponent in declarations array of module – Nikhil Radadiya Commented Aug 27, 2020 at 4:26

2 Answers 2

Two possibilities are here

1. Both elements are in same module

@NgModule({
    ...
    declarations: [AppElementComponent, ParentComopnent]
    ...
})

2. Both are in different Modules

AppComponentModule

@NgModule({
    ...
    declarations: [AppElementComponent],
    exports: [AppElementComponent]
    ...
})

ParentComponentModule

@NgModule({
    ...
    declarations: [ParentComponent],
    imports: [AppComponentModule],
    ...
})

Add ElementComponent to the declarations array within your default module (usually app.module.ts)

@NgModule({
  declarations: [
    ElementComponent
    ...
  ]
...