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

Question

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

共享模块

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

核心模块

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

应用模块

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.

假设一个应用程序具有以下模块：

1. 应用模块
2. 核心模块
3. 共享模块
4. 用户模块(This is called feature module)
5. 管理模块(This is called feature module)

我们来描述一下：

1. 应用模块

在此模块中，我们必须导入将在整个系统中使用的模块/包。像：CommonModule, FormsModule, HttpClientModule等等。我们不需要导出这些模块，因为一旦将其导入到应用程序模块中，它将在整个应用程序中可用。

2. 核心模块

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

3. 共享模块

在这一模块中，我们必须制作Services, Components, Pipes, and Directives将在多个组件中使用的 。如：AlertDialogBox、HTTPService等。

4. 用户模块

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

5. 管理模块

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

Answer 2

对于组件##

如果你想在多个模块中使用你的组件，那么你可以在 a 中定义它SharedModule，声明并导出它。

对于模块

您可以（但不需要）CommonModule, FormsModule etc.从FeatureModule. 如果您将其导入FeatureModule到any中OtherModule，则所有导出的模块将自动导入到OtherModule.

您始终可以在每个模块中单独导入角度模块。但是，如果您在其他功能模块中使用类似的模块，我建议将所有模块导入到共享模块中并在其他地方使用它。