refactor: create RootCoreModule and return it from forRoot

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -22,8 +22,8 @@ import { ReplaceableTemplateDirective } from './directives/replaceable-template.
 import { StopPropagationDirective } from './directives/stop-propagation.directive';
 import { VisibilityDirective } from './directives/visibility.directive';
 import { ApiInterceptor } from './interceptors/api.interceptor';
+import { LocalizationModule } from './localization.module';
 import { ABP } from './models/common';
-import { LocalizationPipe } from './pipes/localization.pipe';
 import { SortPipe } from './pipes/sort.pipe';
 import { ConfigPlugin, NGXS_CONFIG_PLUGIN_OPTIONS } from './plugins/config.plugin';
 import { LocaleProvider } from './providers/locale.provider';
@@ -32,77 +32,103 @@ import { ProfileState } from './states/profile.state';
 import { ReplaceableComponentsState } from './states/replaceable-components.state';
 import { SessionState } from './states/session.state';
 import { CORE_OPTIONS } from './tokens/options.token';
-import { getInitialData, localeInitializer } from './utils/initial-utils';
 import './utils/date-extensions';
+import { getInitialData, localeInitializer } from './utils/initial-utils';
 
 export function storageFactory(): OAuthStorage {
   return localStorage;
 }
+
+/**
+ * BaseCoreModule is the module that holds
+ * all imports, declarations, exports, and entryComponents
+ * but not the providers.
+ * This module will be imported and exported by all others.
+ */
 @NgModule({
-  imports: [
+  exports: [
-    NgxsModule.forFeature([ReplaceableComponentsState, ProfileState, SessionState, ConfigState]),
-    NgxsRouterPluginModule.forRoot(),
-    NgxsStoragePluginModule.forRoot({ key: ['SessionState'] }),
-    OAuthModule,
     CommonModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-  ],
+
-  declarations: [
+    AbstractNgModelComponent,
-    ReplaceableRouteContainerComponent,
-    RouterOutletComponent,
-    DynamicLayoutComponent,
     AutofocusDirective,
+    DynamicLayoutComponent,
     EllipsisDirective,
     ForDirective,
     FormSubmitDirective,
-    LocalizationPipe,
-    SortPipe,
     InitDirective,
-    PermissionDirective,
-    VisibilityDirective,
     InputEventDebounceDirective,
-    StopPropagationDirective,
+    PermissionDirective,
+    ReplaceableRouteContainerComponent,
     ReplaceableTemplateDirective,
-    AbstractNgModelComponent,
+    RouterOutletComponent,
+    SortPipe,
+    StopPropagationDirective,
+    VisibilityDirective,
   ],
-  exports: [
+  imports: [
+    OAuthModule,
     CommonModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    RouterOutletComponent,
+  ],
-    DynamicLayoutComponent,
+  declarations: [
     AbstractNgModelComponent,
-    ReplaceableRouteContainerComponent,
     AutofocusDirective,
+    DynamicLayoutComponent,
     EllipsisDirective,
     ForDirective,
     FormSubmitDirective,
     InitDirective,
-    PermissionDirective,
-    VisibilityDirective,
     InputEventDebounceDirective,
+    PermissionDirective,
+    ReplaceableRouteContainerComponent,
     ReplaceableTemplateDirective,
-    StopPropagationDirective,
+    RouterOutletComponent,
-    LocalizationPipe,
     SortPipe,
-    LocalizationPipe,
+    StopPropagationDirective,
+    VisibilityDirective,
   ],
-  providers: [LocalizationPipe],
   entryComponents: [
     RouterOutletComponent,
     DynamicLayoutComponent,
     ReplaceableRouteContainerComponent,
   ],
 })
+export class BaseCoreModule {}
+
+/**
+ * RootCoreModule is the module that will be used at root level
+ * and it introduces imports useful at root level (e.g. NGXS)
+ */
+@NgModule({
+  exports: [BaseCoreModule, LocalizationModule],
+  imports: [
+    BaseCoreModule,
+    LocalizationModule,
+    NgxsModule.forFeature([ReplaceableComponentsState, ProfileState, SessionState, ConfigState]),
+    NgxsRouterPluginModule.forRoot(),
+    NgxsStoragePluginModule.forRoot({ key: ['SessionState'] }),
+  ],
+})
+export class RootCoreModule {}
+
+/**
+ * CoreModule is the module that is publicly available
+ */
+@NgModule({
+  exports: [BaseCoreModule, LocalizationModule],
+  imports: [BaseCoreModule, LocalizationModule],
+})
 export class CoreModule {
-  static forRoot(options = {} as ABP.Root): ModuleWithProviders {
+  static forRoot(options = {} as ABP.Root): ModuleWithProviders<RootCoreModule> {
     return {
-      ngModule: CoreModule,
+      ngModule: RootCoreModule,
       providers: [
         LocaleProvider,
         {