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

Question

Я пытаюсь использовать селектор компонента контактной формы в компоненте contact-me, но выдает ошибку «app-contact-form» не является известным элементом »? Мой код выглядит следующим образом:

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 - это один из маршрутов в модуле приложения.

Это моя консоль ошибка:

ОШИБКА в src / app / contact-me / contact-me.component. html: 1: 4 - ошибка NG8001: «app-contact-form» не является известным элементом: 1. Если app-contact-form является компонентом Angular, убедитесь, что он является частью этого модуля. 2. Если 'app-contact-form' является веб-компонентом, добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.

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

src / app / contact-me / contact-me.component.ts : 5: 16 5 templateUrl: './contact-me.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Произошла ошибка в шаблоне компонента ContactMeComponent.

** Angular Live Development Server прослушивает localhost: 4200, откройте браузер на http://localhost: 4200 / **

Что еще нужно или что я делаю не так?

Answer 1

Удалить ContactFormComponent из declarations и exports в contact-me.module.ts Вот и все.

Объяснение:

Вы используете app-contact-form, который находится внутри contact-form.module.ts. Поэтому вы должны экспортировать его оттуда, чтобы использовать его в другом модуле.

, а затем импортировать ContactFormModule туда, куда вам нужно ContactFormComponent. Вот в твоем случае импорт в contact-me.module.ts

Answer 2

Я нашел недостающую часть, мне нужно было импортировать ContactMeComponent в импорте app.module.ts.

Answer 3

Попробуйте и убедитесь, что компонент, который вы добавляете в шаблон html, должен быть добавлен в app.module.ts. Это может быть добавлено непосредственно или в вашем случае может быть добавлено в общий модуль, который затем добавляется в app.module.ts