'app-element' is not a known element angular

Question

I am trying to use selector of contact-form component in contact-me component but it gives the error " 'app-contact-form' is not a known element"? My code is as follows:

contact-me.module.ts

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { ContactMeComponent } from './contact-me.component';
        import { ContactFormComponent } from './contact-form/contact-form.component';
        import { ContactFormModule } from './contact-form/contact-form.module';


       @NgModule({
            declarations: [ContactMeComponent, ContactFormComponent],
            imports: [
               CommonModule,
               ContactFormModule
            ],
            exports: [ContactMeComponent, ContactFormComponent]
         })
         export class ContactMeModule { }

contact-form.module.ts

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { ContactFormComponent } from './contact-form.component';
        import { FormsModule, ReactiveFormsModule } from '@angular/forms';



        @NgModule({
           declarations: [ContactFormComponent],
           imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule
          ],
           exports: [ContactFormComponent]
        })
         export class ContactFormModule { }

contact-me.component.html

         <app-contact-form></app-contact-form>

contact-form.component.ts

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

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  contactForm = new FormGroup({
    projectTitle: new FormControl(''),
    fullName: new FormControl(''),
    emailAddress: new FormControl(''),
    phoneNumber: new FormControl('')
  });

}

contact-me is one of the routes in app module.

This is my console error:

ERROR in src/app/contact-me/contact-me.component.html:1:4 - error NG8001: 'app-contact-form' is not a known element: 1. If 'app-contact-form' is an Angular component, then verify that it is part of this module. 2. If 'app-contact-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/contact-me/contact-me.component.ts:5:16 5 templateUrl: './contact-me.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component ContactMeComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

What else is needed or what am i doing wrong?

In your contact-form.module.ts, add ContactFormComponent as entryComponent too. — Ankur Chauhan
@AnkurChauhan what are you talking about? it has nothing to do with entryComponent.... — Talg123
remove ContactFormComponent from declaration and export of ContactMeModule — Gourav Garg
@VishalDeep your ContactFormComponent is part of two modules as i can see from the above code. It should be part of only on module and then that module should be imported in any other module where the ContactFormComponent is required. Remove ContactFormComponent from declarations and exports of ContactModule. — Manish

shiva krishna shiva krishna · Accepted Answer · 2020-04-14T07:04:09

Remove ContactFormComponent from both declarations and exports in contact-me.module.ts That's all.

Explanation:

You are using app-contact-form which is inside contact-form.module.ts. So you have to export it from there in order to use it in another module.

and then, import ContactFormModule wherever you need ContactFormComponent. Here in your case import in contact-me.module.ts

'app-element' is not a known element angular

3 Answers