Question

我正在尝试在contact-me组件中使用contact-form组件的选择器，但出现错误“'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”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ p

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

尝试确保将要在html模板中添加的组件添加到app.module.ts。这可以直接添加，也可以在共享模块中添加，然后添加到app.module.ts

Answer 3

我找到了缺少的部分，我需要在app.module.ts的导入中导入ContactMeComponent。

“ app-element”不是已知的角元素

3 个答案: