'app-element' is not a known element in angular

Question

I want to display a graph.

In the chart.component.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.component.html',
  styleUrls: ['./element.component.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:

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

Then when I try ng serve

An error occurs:

If 'app-heatmap' is an Angular component, 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 component to suppress this message.
2 

Seems I forgot one step?

user_11016275 · Answer

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

user_3186832 · Answer

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

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

'app-element' is not a known element in angular

2 Answers