From f607958b0e67d53372a17f1c18d3d24e86221987 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 22 Jun 2020 13:29:30 +0300 Subject: [PATCH 1/4] feat: add styles provider to theme basic package --- .../theme-basic/src/lib/providers/index.ts | 1 + .../src/lib/providers/styles.provider.ts | 42 +++++++++++++++++++ .../packages/theme-basic/src/public-api.ts | 3 +- 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 npm/ng-packs/packages/theme-basic/src/lib/providers/index.ts create mode 100644 npm/ng-packs/packages/theme-basic/src/lib/providers/styles.provider.ts diff --git a/npm/ng-packs/packages/theme-basic/src/lib/providers/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/providers/index.ts new file mode 100644 index 0000000000..607efd62a5 --- /dev/null +++ b/npm/ng-packs/packages/theme-basic/src/lib/providers/index.ts @@ -0,0 +1 @@ +export * from './styles.provider'; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/providers/styles.provider.ts b/npm/ng-packs/packages/theme-basic/src/lib/providers/styles.provider.ts new file mode 100644 index 0000000000..ab6ea9cd1e --- /dev/null +++ b/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, + }), + ]); +} diff --git a/npm/ng-packs/packages/theme-basic/src/public-api.ts b/npm/ng-packs/packages/theme-basic/src/public-api.ts index 580366dbcb..680c00ebbb 100644 --- a/npm/ng-packs/packages/theme-basic/src/public-api.ts +++ b/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'; From f7604bc5285f26515460ea5c12decef558384b00 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 22 Jun 2020 13:31:03 +0300 Subject: [PATCH 2/4] feat: add static forRoot method that injects styles --- .../theme-basic/src/lib/services/index.ts | 1 - .../src/lib/services/initial.service.ts | 34 ------------------- .../theme-basic/src/lib/theme-basic.module.ts | 11 ++++-- 3 files changed, 8 insertions(+), 38 deletions(-) delete mode 100644 npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/index.ts index b904c4d663..455d7798f5 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/services/index.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/services/index.ts @@ -1,2 +1 @@ -export * from './initial.service'; export * from './layout-state.service'; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts deleted file mode 100644 index c5bc93cbf0..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts +++ /dev/null @@ -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)); - } -} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts index 0a91c83fc7..5c4d67515e 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts +++ b/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 { + return { + ngModule: ThemeBasicModule, + providers: [BASIC_THEME_STYLES_PROVIDERS], + }; + } } From 2328363030a91ccee2d9e81151b983613509bbc1 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 22 Jun 2020 13:31:49 +0300 Subject: [PATCH 3/4] feat: import ThemeBasicModule instead of SharedModule --- npm/ng-packs/apps/dev-app/src/app/app.module.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts index acf8fcaaa8..71fedf421b 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts +++ b/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], From fcc571ccdf5e405b2e7a48bf882ef67992f67729 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 22 Jun 2020 13:32:14 +0300 Subject: [PATCH 4/4] feat: update template according to new config modules --- .../app/angular/src/app/app-routing.module.ts | 23 +++++++++++-------- templates/app/angular/src/app/app.module.ts | 20 ++++++++-------- 2 files changed, 23 insertions(+), 20 deletions(-) diff --git a/templates/app/angular/src/app/app-routing.module.ts b/templates/app/angular/src/app/app-routing.module.ts index 91974e01ce..4a6658a089 100644 --- a/templates/app/angular/src/app/app-routing.module.ts +++ b/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 {} diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts index bda69544fb..2ad5f8a7bc 100644 --- a/templates/app/angular/src/app/app.module.ts +++ b/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],