Angular 2+，有什么办法可以在模块中声明所有组件，然后导入app.module.ts？

Question

Hi I am trying to declare all the components in a single module and then I add that components module in imports of app.module.ts.

import { LandingPageComponent } from './landing-page/landing-page.component';
import { JobSeekerComponent } from './job-seeker/job-seeker.component';
import { RecruiterComponent } from './recruiter/recruiter.component';
import { PostJobsComponent } from './recruiter/post-jobs/post-jobs.component';
import { JobSeekerLayoutComponent } from './layout/job-seeker-layout/job-seeker-layout.component';
import { RecruiterLayoutComponent } from './layout/recruiter-layout/recruiter-layout.component';
import { RecruiterHeaderComponent } from './layout/recruiter-header/recruiter-header.component';
import { AutocompleteComponent } from './common/autocomplete/autocomplete.component';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
    exports: [
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
})
export class **ComponentsModule** { }

This is the components module which i have created and then i want to initialize this in app.module.ts. Will this work, cause when i am trying to do so, it throws an error Please add a @NgModule annotation. In my app.module.ts. I did something like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { **ComponentsModule** } from './components';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent  
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    **ComponentsModule**
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Instead of importing the components, you should rather declare them in ComponentsModule

@NgModule({
    declarations: [           // declare components here
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
    exports: [
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
})