Import and Export Core Module and Shared Module

问题

I'm having a difficulty in determining on what should i "import" and "export" in my core modules and shared modules. For instance, in my shared module, i imported and exported CommonModule while only exported the ReactiveFormsModule. In my core module, i imported modules and exported components only. I'm wondering what should i "import" and "export" in core and shared module? I've read other examples here in stackoverflow and the docs and I'm still confuse. Please check my structure/codes below. Thanks.

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

回答1:

For Components ##

If you want to use your component in multiple modules, then you can define it in a SharedModule, declare and export it.

For Modules

You can (but don't need to) export the angular modules CommonModule, FormsModule etc. from your FeatureModule. If you import this FeatureModule in any OtherModule, all the exported modules would be automatically imported to OtherModule.

You can always import the angular modules separately in each module. However, if you are using a similar bunch of modules in other feature modules, I would suggest to import all modules into a shared module and use it everywhere else.

回答2:

There is a specific purpose of each module (Shared, Core etc..).

So the question is what package should I import in Shared Module and what in the Core Module.

So suppose of an application which has the following modules:

App Module
Core Module
Shared Module
User Module (This is called feature module)
Admin Module (This is called feature module)

Let's describe it:

App Module

In this module, we have to import the modules/packages which we will use throughout our system. Like: CommonModule, FormsModule, HttpClientModule etc. And we don't need to export these modules as it will be available in whole application once it is imported in App Module.

Core Module

In this module, we have to make components which will be used in almost every page of the system. Like: HeaderComponent, FooterCompoennt, AuthGaurds etc. And these components should be exported so that it will be available in other modules.

Shared Module

In this module, we have to make the Services, Components, Pipes, and Directives which will be used in more than one component. Like: AlertDialogBox, HTTPService, etc.

User Module

This is a featured module. It will have the components specific to a User Module. Here we can import Shared Module so that we can use AlertDialogBox and all.

Admin Module

This is a featured module. It will have the components specific to a User Module. Here we can import Shared Module so that we can use AlertDialogBox and all.

来源：https://stackoverflow.com/questions/55095288/import-and-export-core-module-and-shared-module

标签

angular

angular6

angular7