Uncaught Error: Template parse errors: 'app-message-menu' is not a known element. Angular 4

Question

I have two components header-navbar.component.ts and message-menu.component.ts I want to include message-menu component html into header-navbar component i.e I want to make it a child component.

I have added message menu component in declarations of app.modules.ts, exports and imports. Imported message menu component in header navbar component. But still I get error:

Uncaught Error: Template parse errors: 'app-message-menu' is not a known element: 1. If 'app-message-menu' is an Angular component, then verify that it is part of this module. 2. If 'app-message-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

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

header-navbar.component.html

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

message-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() {
  }

}

message-menu.component.html

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

I have referred several questions on stackoverflow and follow all steps to use one component in another but it did not work.

I referred this SO question for help.

Please let me know if more info required.

score 0 · Answer 1 · answered May 01 '18 at 17:53

0

You do not need to export components since you are not using a shared module. Also add the necessary providers and HeaderNavbarComponent under declarations and providers inside app.module.ts

@NgModule({
  declarations: [ 
    HeaderNavbarComponent 
    MessageMenuComponent

 ],
 exports: [  
  ],

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

answered May 01 '18 at 17:53

Sajeetharan

216,225
63
350
396

Thanks for help. I did not mention all declarations and no providers to keep code short. Sorry for that. let me try this solution. – Always_a_learner May 01 '18 at 17:57
Sajeetharan Thanks, but I still get same error. Can you tell me why we mention components in exports? – Always_a_learner May 01 '18 at 18:00
2

if you want your component to be used across different modules using a sharedmodule then you can use exports – Sajeetharan May 01 '18 at 18:01
Can you guide further that why I might be getting this error. My angular project is inside node module of another angular project. Could that be a problem? – Always_a_learner May 01 '18 at 18:03
Nope that cannot be an issue! check if you have done all the necessary imports – Sajeetharan May 01 '18 at 18:04
Thanks again. I have added both the components in declarations and than imports of app.module.ts and then import the child component. Is there any other step which I missed? – Always_a_learner May 01 '18 at 18:09
here is a simple example https://stackblitz.com/edit/angular-ai1zsi?file=app/app.module.ts – Sajeetharan May 01 '18 at 18:15

Uncaught Error: Template parse errors: 'app-message-menu' is not a known element. Angular 4

1 Answers1