angular - 导入导出核心模块和共享模块

Question

我很难确定我应该在我的核心模块和共享模块中“导入”和“导出”什么。例如，在我的共享模块中，我导入和导出了 CommonModule，而只导出了 ReactiveFormsModule。在我的核心模块中，我只导入模块和导出组件。我想知道我应该在核心和共享模块中“导入”和“导出”什么？我在 stackoverflow 和文档中阅读了其他示例，但我仍然感到困惑。请在下面检查我的结构/代码。谢谢。

Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { ToggleFullscreenDirective } from './directives/toggle-fullscreen.directive';
import { ViewComponent } from './view/view.component';
import { ErrorsComponent } from './reusable-error-page/errors.component';

@NgModule({
  exports: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent,
    CommonModule,
    ReactiveFormsModule
  ],
  imports: [
    CommonModule
  ],
  declarations: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent
  ]
})
export class SharedModule { }

Core Module

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HttpRequestInterceptor } from './http-request.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AuthModule } from '@app/auth/auth.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { ReactiveFormsModule } from '@angular/forms';
import { ContentLayoutComponent } from '../layouts/content/content-layout.component';
import { FullLayoutComponent } from '../layouts/full/full-layout.component';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
import { ErrorPageComponent } from '../error-page/error-page.component';

// NGXS
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
import { NGXS_PLUGINS } from '@ngxs/store';
import { logoutPlugin } from '@app/auth/plugins/logout.plugin';

@NgModule({
  declarations: [
    NavbarComponent,
    SidebarComponent,
    FooterComponent,
    FullLayoutComponent,
    ContentLayoutComponent,
    PageNotFoundComponent,
    ErrorPageComponent
  ],

  imports: [
    AuthModule,
    BrowserAnimationsModule,
    HttpClientModule,
    CommonModule,
    ReactiveFormsModule,
    NgSelectModule,
    RouterModule,
    NgbModule,
    NgxsReduxDevtoolsPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot(),
    NgxsModule.forRoot(),
    NgxsStoragePluginModule.forRoot(),
    NgxsRouterPluginModule.forRoot()
  ],

  exports: [
    NavbarComponent,
    SidebarComponent,
    FooterComponent,
    FullLayoutComponent,
    ContentLayoutComponent,
    PageNotFoundComponent,
    ErrorPageComponent
  ],

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
    {
      provide: NGXS_PLUGINS,
      useValue: logoutPlugin,
      multi: true
    }
  ]

})
export class CoreModule { }

App Module

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '@env/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    CoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

每个模块(共享、核心等)都有特定的用途。

所以问题是我应该在 Shared Module 中导入什么包以及 Core Module 中的内容.

因此，假设一个应用程序具有以下模块:

应用模块

核心模块

共享模块

用户模块(This is called feature module)

管理模块 (This is called feature module)

我们来描述一下:

1. App Module

在这个模块中，我们必须导入我们将在整个系统中使用的模块/包。喜欢: CommonModule, FormsModule, HttpClientModule等等，我们不需要导出这些模块，因为一旦它被导入到 App Module 中，它就可以在整个应用程序中使用。

2. Core Module

在这个模块中，我们必须制作将在系统的几乎每个页面中使用的组件。喜欢: HeaderComponent , FooterCompoennt , AuthGaurds等等，这些组件应该被导出，以便在其他模块中可用。

3. Shared Module

在这个模块中，我们必须使 Services, Components, Pipes, and Directives这将用于多个组件。喜欢: AlertDialogBox , HTTPService ， ETC。

4. User Module

这是一个特色模块。它将具有特定于用户模块的组件。在这里我们可以导入共享模块以便我们可以使用 AlertDialogBox和所有。

5. Admin Module

这是一个特色模块。它将具有特定于用户模块的组件。在这里我们可以导入共享模块以便我们可以使用 AlertDialogBox和所有。