Javascript “应用程序元素”不是已知元素

我正在尝试在contact me组件中使用contact form组件的选择器，但出现错误“app contact form”不是已知元素？我的代码如下：

联系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 { }

        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-form.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 { }

        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>

联系我是应用程序模块中的路线之一

这是我的控制台错误：

src/app/contact me/contact me.component.html:1:4中出错-错误NG8001:“app contact form”不是已知元素： 1.如果“应用程序联系人表单”是一个角度组件，则验证它是否是此模块的一部分。 2.如果“app contact form”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息

一, ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/contact me/contact me.component.ts:5:16 5 templateUrl:“./contact me.component.html”， ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件ContactMeComponent的模板中出错

**Angular Live Development Server正在本地主机上侦听：4200，请在上打开浏览器**

---

还需要什么或者我做错了什么？

尝试并确保您在html模板中添加的组件应添加到app.module.ts。这可以直接添加，或者在您的情况下，可以添加到共享模块中，然后添加到app.module.ts中

从contact-me.module.ts中的声明和导出中删除ContactFormComponent

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

        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-form.module.ts中的应用程序联系人表单。因此，您必须从那里导出它，以便在另一个模块中使用它

---

然后，在需要ContactFormComponent的地方导入ContactFormModule。在您的案例中，导入contact-me.module.ts

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

您可以添加contact-form.component ts文件的代码吗？在contact-form.module.ts中，也将ContactFormComponent添加为entryComponent。@AnkurChauhan您在说什么？它与entryComponent无关…从的声明和导出中删除ContactFormComponentContactMeModule@VishalDeep您的ContactFormComponent是两个模块的一部分，我可以从上面的代码中看到。它应该是only on模块的一部分，然后该模块应该导入到需要ContactFormComponent的任何其他模块中。从ContactModule的声明和导出中删除ContactFormComponent。你是说我应该在app.module.ts的导入中添加ContactFormModule？是的，无论你在angular app中声明的组件是什么，都必须以某种方式成为app.module.ts文件的一部分。我在app.module.ts的导入中添加了ContactFormModule，但它仍然不起作用。无论何时使用共享模块，请尝试从该模块导出组件和提供程序。然后它将可用于app.module，可在整个应用程序中使用。这不是解决方案。但是，您可以在App.module.ts中导入ContactMeModule

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

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