如何在另一个内部使用组件

Question

I cannot use app.module as this is a large application. The component I want to use this component in DOES NOT HAVE a module file.

I have tried importing it and using @Ngmodule but doesn't work.

Uncaught Error: Template parse errors: 'x' is not a known element:

Answer 1

If your application is too big it's better to make different modules for features. As an example you can make an auth module and add your login and register components there. You have to declare your components which are belong to each module, within that child module. For that module, you can add a separate routing file as well. If you want to use one of your component's selector as , you need to export it in your child module. Don't forget to import CommonModule in your child module.

@NgModule({
declarations: [
 BreadcrumbsComponent,
 ModalLoginComponent,
],
imports: [
 CommonModule,
 RouterModule,
 FormsModule,
 NgxSpinnerModule
],
exports: [
 BreadcrumbsComponent,
 ModalLoginComponent
]
})
export class SharedModule {}

And in your app.module you have to import your child module.

@NgModule({
declarations: [
 AppComponent,
 WorldWideComponent,
 HeaderComponent,
 FooterComponent,
 PageNotFoundComponent
],
imports: [
 BrowserModule,
 BrowserAnimationsModule,
 AppRoutesModule,
 SharedModule,
 CoreModule,
 UserModule,
 NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 2

You don't put a component in directives

You register it in @NgModule declarations:

@NgModule({
imports: [ BrowserModule ],
declarations: [ App , MyChildComponent ],
bootstrap: [ App ]
})

and then You just put it in the Parent's Template HTML as : <my-child></my-child>