'app-element' не является известным элементом в angular

#javascript #angular #typescript #plotly

#javascript #angular #typescript #сюжетно

Вопрос:

Я хочу отобразить график.

В файл chart.component.ts я записал данные для построения графика:

 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 {
  }

}
html выглядит следующим образом:

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

Затем я хочу отобразить этот график в другом компоненте.
Я создаю dashboard.component.ts

 <app-element></app-element>

Затем, когда я пытаюсь ng serve

Возникает ошибка:

Если ‘app-heatmap’ является компонентом Angular, то убедитесь, что он является частью этого модуля. 2. Если ‘app-element’ является веб-компонентом, то добавьте ‘CUSTOM_ELEMENTS_SCHEMA’ в ‘@NgModule.schemas’ этого компонента, чтобы подавить это сообщение.
 2 <app-element></app-element>
  

Кажется, я забыл один шаг?

1. Объявляете ли вы этот компонент в declarations на @NgModule любом месте?

2. Ошибка указывает на то, что существует какой-то другой компонент, который вызывает проблему, а не тот, который вы отобразили. Существует ли другой компонент с селектором под названием «app-heatmap», который вы не объявили в модуле?

3. Я почти уверен, что вы забыли объявить свой компонент в main.module, смотрите Документы о модулях: angular.io/guide/ngmodules

4. @Eden1998 убедитесь, что вы добавили компонент в declarations массив module

Ответ №1:

Здесь есть две возможности

1. Оба элемента находятся в одном модуле

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

2. Оба находятся в разных модулях

AppComponentModule

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

ParentComponentModule

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

Ответ №2:

Добавьте ElementComponent в declarations массив в вашем модуле по умолчанию (обычно app.module.ts )

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