Merge pull request #4455 from abpframework/feat/4454

Added forRoot Static Method for Theme Basic Configuration

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { CoreModule } from '@abp/ng.core';
 import { IdentityConfigModule } from '@abp/ng.identity/config';
 import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
+import { ThemeBasicModule } from '@abp/ng.theme.basic';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -12,7 +13,6 @@ import { NgxsModule } from '@ngxs/store';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { SharedModule } from './shared/shared.module';
 
 const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
 
@@ -32,7 +32,7 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
     TenantManagementConfigModule.forRoot(),
     SettingManagementConfigModule.forRoot(),
     NgxsModule.forRoot(),
-    SharedModule,
+    ThemeBasicModule.forRoot(),
     ...(environment.production ? [] : LOGGERS),
   ],
   declarations: [AppComponent],

npm/ng-packs/packages/theme-basic/src/lib/providers/index.ts

@@ -0,0 +1 @@
+export * from './styles.provider';

npm/ng-packs/packages/theme-basic/src/lib/providers/styles.provider.ts

@@ -0,0 +1,42 @@
+import { AddReplaceableComponent, CONTENT_STRATEGY, DomInsertionService } from '@abp/ng.core';
+import { APP_INITIALIZER } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { AccountLayoutComponent } from '../components/account-layout/account-layout.component';
+import { ApplicationLayoutComponent } from '../components/application-layout/application-layout.component';
+import { EmptyLayoutComponent } from '../components/empty-layout/empty-layout.component';
+import styles from '../constants/styles';
+import { eThemeBasicComponents } from '../enums/components';
+
+export const BASIC_THEME_STYLES_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureStyles,
+    deps: [DomInsertionService, Store],
+    multi: true,
+  },
+];
+
+export function configureStyles(domInsertion: DomInsertionService, store: Store) {
+  return () => {
+    domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
+
+    initLayouts(store);
+  };
+}
+
+function initLayouts(store: Store) {
+  store.dispatch([
+    new AddReplaceableComponent({
+      key: eThemeBasicComponents.ApplicationLayout,
+      component: ApplicationLayoutComponent,
+    }),
+    new AddReplaceableComponent({
+      key: eThemeBasicComponents.AccountLayout,
+      component: AccountLayoutComponent,
+    }),
+    new AddReplaceableComponent({
+      key: eThemeBasicComponents.EmptyLayout,
+      component: EmptyLayoutComponent,
+    }),
+  ]);
+}

npm/ng-packs/packages/theme-basic/src/lib/services/index.ts

@@ -1,2 +1 @@
-export * from './initial.service';
 export * from './layout-state.service';

npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts

@@ -1,34 +0,0 @@
-import { DomInsertionService, AddReplaceableComponent, CONTENT_STRATEGY } from '@abp/ng.core';
-import { Injectable } from '@angular/core';
-import { Store } from '@ngxs/store';
-import styles from '../constants/styles';
-import { ApplicationLayoutComponent } from '../components/application-layout/application-layout.component';
-import { AccountLayoutComponent } from '../components/account-layout/account-layout.component';
-import { EmptyLayoutComponent } from '../components/empty-layout/empty-layout.component';
-import { eThemeBasicComponents } from '../enums/components';
-
-@Injectable({ providedIn: 'root' })
-export class InitialService {
-  constructor(private domInsertion: DomInsertionService, private store: Store) {
-    this.appendStyle();
-
-    this.store.dispatch([
-      new AddReplaceableComponent({
-        key: eThemeBasicComponents.ApplicationLayout,
-        component: ApplicationLayoutComponent,
-      }),
-      new AddReplaceableComponent({
-        key: eThemeBasicComponents.AccountLayout,
-        component: AccountLayoutComponent,
-      }),
-      new AddReplaceableComponent({
-        key: eThemeBasicComponents.EmptyLayout,
-        component: EmptyLayoutComponent,
-      }),
-    ]);
-  }
-
-  appendStyle() {
-    this.domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
-  }
-}

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -1,6 +1,6 @@
 import { CoreModule } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { NgxsModule } from '@ngxs/store';
@@ -11,7 +11,7 @@ import { LogoComponent } from './components/logo/logo.component';
 import { NavItemsComponent } from './components/nav-items/nav-items.component';
 import { RoutesComponent } from './components/routes/routes.component';
 import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
-import { InitialService } from './services/initial.service';
+import { BASIC_THEME_STYLES_PROVIDERS } from './providers/styles.provider';
 import { LayoutState } from './states/layout.state';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
@@ -62,5 +62,10 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
   entryComponents: [...LAYOUTS, ValidationErrorComponent],
 })
 export class ThemeBasicModule {
-  constructor(private initialService: InitialService) {}
+  static forRoot(): ModuleWithProviders<ThemeBasicModule> {
+    return {
+      ngModule: ThemeBasicModule,
+      providers: [BASIC_THEME_STYLES_PROVIDERS],
+    };
+  }
 }

npm/ng-packs/packages/theme-basic/src/public-api.ts

@@ -2,10 +2,11 @@
  * Public API Surface of theme-basic
  */
 
-export * from './lib/theme-basic.module';
 export * from './lib/actions';
 export * from './lib/components';
 export * from './lib/enums';
 export * from './lib/models';
+export * from './lib/providers';
 export * from './lib/services';
 export * from './lib/states';
+export * from './lib/theme-basic.module';

templates/app/angular/src/app/app-routing.module.ts

@@ -5,33 +5,36 @@ import { RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
+    loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
     data: {
       routes: {
-        name: '::Menu:Home'
-      } as ABP.Route
-    }
+        name: '::Menu:Home',
+      } as ABP.Route,
+    },
   },
   {
     path: 'account',
-    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule)
+    loadChildren: () =>
+      import('@abp/ng.account').then((m) => m.AccountModule.forLazy({ redirectUrl: '/' })),
   },
   {
     path: 'identity',
-    loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule)
+    loadChildren: () => import('@abp/ng.identity').then((m) => m.IdentityModule.forLazy()),
   },
   {
     path: 'tenant-management',
-    loadChildren: () => import('@abp/ng.tenant-management').then(m => m.TenantManagementModule)
+    loadChildren: () =>
+      import('@abp/ng.tenant-management').then((m) => m.TenantManagementModule.forLazy()),
   },
   {
     path: 'setting-management',
-    loadChildren: () => import('@abp/ng.setting-management').then(m => m.SettingManagementModule)
-  }
+    loadChildren: () =>
+      import('@abp/ng.setting-management').then((m) => m.SettingManagementModule.forLazy()),
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}

templates/app/angular/src/app/app.module.ts

@@ -1,8 +1,9 @@
-import { AccountConfigModule } from '@abp/ng.account.config';
+import { AccountConfigModule } from '@abp/ng.account/config';
 import { CoreModule } from '@abp/ng.core';
-import { IdentityConfigModule } from '@abp/ng.identity.config';
-import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
-import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
+import { IdentityConfigModule } from '@abp/ng.identity/config';
+import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
+import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
+import { ThemeBasicModule } from '@abp/ng.theme.basic';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -12,7 +13,6 @@ import { NgxsModule } from '@ngxs/store';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { SharedModule } from './shared/shared.module';
 
 const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
 
@@ -25,12 +25,12 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
       environment,
     }),
     ThemeSharedModule.forRoot(),
-    AccountConfigModule.forRoot({ redirectUrl: '/' }),
-    IdentityConfigModule,
-    TenantManagementConfigModule,
-    SettingManagementConfigModule,
+    AccountConfigModule.forRoot(),
+    IdentityConfigModule.forRoot(),
+    TenantManagementConfigModule.forRoot(),
+    SettingManagementConfigModule.forRoot(),
     NgxsModule.forRoot(),
-    SharedModule,
+    ThemeBasicModule.forRoot(),
     ...(environment.production ? [] : LOGGERS),
   ],
   declarations: [AppComponent],