Uncaught Error: Ошибки синтаксического анализа шаблона: 'app-message-menu' не является известным элементом. Угловой 4

Question

У меня есть два компонента header-navbar.component.ts и message-menu.component.ts Я хочу включить html компонента меню сообщений в компонент header-navbar, т. Е. Сделать его дочерним компонентом.

Я добавил компонент меню сообщений в объявлениях app.modules.ts, экспорта и импорта. Импортированный компонент меню сообщения в заголовке компонента панели навигации. Но все равно я получаю ошибку:

Uncaught Error: Ошибки разбора шаблона: 'app-message-menu' не является известный элемент: 1. Если 'app-message-menu' является угловым компонентом, то убедитесь, что он является частью этого модуля. 2. Если «app-message-menu» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» к «@ NgModule.schemas» этого компонента. подавить это сообщение

заголовочные-navbar.component.ts

import { Component, ViewChild, OnInit, Input, EventEmitter, ViewEncapsulation, OnDestroy, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

import { MessageMenuComponent } from '../message-menu/message-menu.component'
declare var jQuery: any;
import {
  OnboardingServiceV2
} from '../../../services/system/onboardingv2/onboarding.service.v2';
@Component({
  selector: 'header-navbar',
  templateUrl: './header-navbar.component.html',
  styleUrls: ['./header-navbar.component.css'],
  host: {'(document:click)': 'onClick($event)'},
  outputs:['onOpenSign'],
  // encapsulation: ViewEncapsulation.None,
  providers: [CollaborationProvider, MessageMenuComponent],
})
export class HeaderNavbarComponent implements OnInit, OnDestroy {

app.module.ts

import { MessageMenuComponent } from './widget-library/rich-elements/message-menu/message-menu.component';

@NgModule({
  declarations: [...
    MessageMenuComponent

 ],
 exports: [
  MessageMenuComponent
  ],

 bootstrap: [AppComponent]
})
export class myModule { }

заголовок-navbar.component.html

   <app-message-menu></app-message-menu>

сообщение-menu.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-message-menu',
  templateUrl: './message-menu.component.html',
  styleUrls: ['./message-menu.component.css']
})
export class MessageMenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

сообщение-menu.component.html

<p>
  message-menu works!
</p>

Я ответил на несколько вопросов по stackoverflow и выполнил все шаги, чтобы использовать один компонент в другом, но он не работал.

Я передал этот ТАК * вопрос о помощи.

Пожалуйста, дайте мне знать, если потребуется дополнительная информация.

Answer 1

Вам не нужно экспортировать компоненты, так как вы не используете общий модуль. Также добавьте необходимые провайдеры и HeaderNavbarComponent в декларации и провайдеры внутри app.module.ts

@NgModule({
  declarations: [ 
    HeaderNavbarComponent 
    MessageMenuComponent

 ],
 exports: [  
  ],

 bootstrap: [AppComponent]
})
export class myModule { }