CODEWITHSUNDEEP
javascriptangular
Vishal Deep
Vishal Deep

Reputation: 31

'app-element' is not a known element angular

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?

Upvotes: 2

Views: 4922

Answers (3)

Vishal Deep
Vishal Deep

Reputation: 31

I have found the missing part, i needed to import ContactMeComponent in imports of app.module.ts.

Upvotes: 0

skdonthi
skdonthi

Reputation: 1442

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

Upvotes: 2

Sanket Thotange
Sanket Thotange

Reputation: 25

Try and make sure the component which you are adding in html template, should be added to app.module.ts. This can directly added or in your case can be added in shared module which is then added in app.module.ts

Upvotes: 0

Related Questions