feature: add root modules

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

@@ -1,33 +1,17 @@
 import { CoreModule } from '@abp/ng.core';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { NgModule } from '@angular/core';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { TableModule } from 'primeng/table';
 import { AccountRoutingModule } from './account-routing.module';
 import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { TenantBoxComponent } from './components/tenant-box/tenant-box.component';
-import { Options } from './models/options';
-import { ACCOUNT_OPTIONS, optionsFactory } from './tokens/options.token';
-import { TableModule } from 'primeng/table';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, TenantBoxComponent],
   imports: [CoreModule, AccountRoutingModule, ThemeSharedModule, TableModule, NgbDropdownModule, NgxValidateCoreModule],
   exports: [],
 })
-export class AccountModule {
-  static forRoot(options = {} as Options): ModuleWithProviders {
-    return {
-      ngModule: AccountModule,
-      providers: [
-        { provide: ACCOUNT_OPTIONS, useValue: options },
-        {
-          provide: 'ACCOUNT_OPTIONS',
-          useFactory: optionsFactory,
-          deps: [ACCOUNT_OPTIONS],
-        },
-      ],
-    };
-  }
-}
+export class AccountModule {}

npm/ng-packs/packages/account/src/lib/root-account.module.ts

@@ -0,0 +1,20 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { Options } from './models/options';
+import { ACCOUNT_OPTIONS, optionsFactory } from './tokens/options.token';
+
+@NgModule({})
+export class RootAccountModule {
+  static forRoot(options = {} as Options): ModuleWithProviders {
+    return {
+      ngModule: RootAccountModule,
+      providers: [
+        { provide: ACCOUNT_OPTIONS, useValue: options },
+        {
+          provide: 'ACCOUNT_OPTIONS',
+          useFactory: optionsFactory,
+          deps: [ACCOUNT_OPTIONS],
+        },
+      ],
+    };
+  }
+}

npm/ng-packs/packages/account/src/public-api.ts

@@ -1,7 +1,4 @@
-/*
- * Public API Surface of auth
- */
-
+export * from './lib/root-account.module';
 export * from './lib/account.module';
 export * from './lib/components';
 export * from './lib/constants/routes';

npm/ng-packs/packages/feature-management/src/lib/root-feature-management.module.ts

@@ -0,0 +1,11 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+@NgModule({})
+export class RootFeatureManagementModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: RootFeatureManagementModule,
+      providers: [],
+    };
+  }
+}

npm/ng-packs/packages/feature-management/src/public-api.ts

@@ -1,2 +1,3 @@
+export * from './lib/root-feature-management.module';
 export * from './lib/feature-management.module';
 export * from './lib/components';

npm/ng-packs/packages/identity/src/lib/root-identity.module.ts

@@ -0,0 +1,11 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+@NgModule({})
+export class RootIdentityModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: RootIdentityModule,
+      providers: [],
+    };
+  }
+}

npm/ng-packs/packages/identity/src/public-api.ts

@@ -2,6 +2,7 @@
  * Public API Surface of identity
  */
 
+export * from './lib/root-identity.module';
 export * from './lib/identity.module';
 export * from './lib/actions/identity.actions';
 export * from './lib/components/roles/roles.component';

npm/ng-packs/packages/permission-management/src/lib/root-permission-management.module.ts

@@ -0,0 +1,11 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+@NgModule({})
+export class RootPermissionManagementModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: RootPermissionManagementModule,
+      providers: [],
+    };
+  }
+}

npm/ng-packs/packages/permission-management/src/public-api.ts

@@ -2,6 +2,7 @@
  * Public API Surface of permission-management
  */
 
+export * from './lib/root-permission-management.module';
 export * from './lib/permission-management.module';
 export * from './lib/actions';
 export * from './lib/components';

npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.html

@@ -1,9 +1,9 @@
 <div class="row entry-row">
   <div class="col-auto">
-    <h1 class="content-header-title">{{'AbpSettingManagement::Settings' | abpLocalization}}</h1>
+    <h1 class="content-header-title">{{ 'AbpSettingManagement::Settings' | abpLocalization }}</h1>
   </div>
   <div id="breadcrumb" class="col-md-auto pl-md-0">
-  <abp-breadcrumb></abp-breadcrumb>
+    <abp-breadcrumb></abp-breadcrumb>
   </div>
   <div class="col">
     <div class="text-lg-right pt-2" id="AbpContentToolbar"></div>
@@ -16,7 +16,12 @@
       <div class="row">
         <div class="col-3">
           <ul class="nav flex-column nav-pills" id="T515ccf3324254f41a4a9a6b34b0dae56" role="tablist">
-            <li *ngFor="let setting of settings" (click)="selected = setting" class="nav-item">
+            <li
+              *ngFor="let setting of settings"
+              (click)="selected = setting"
+              class="nav-item"
+              [abpPermission]="setting.requiredPolicy"
+            >
               <a
                 class="nav-link"
                 [id]="setting.name + '-tab'"
@@ -33,140 +38,10 @@
               <h2>{{ selected.name | abpLocalization }}</h2>
               <hr class="my-4" />
 
-              <ng-container *ngComponentOutlet="selected.component"></ng-container>
-            </div>
-            <div
-              class="tab-pane fade  "
-              id="T515ccf3324254f41a4a9a6b34b0dae56_1"
-              role="tabpanel"
-              aria-labelledby="T515ccf3324254f41a4a9a6b34b0dae56_1-tab"
-            >
-              <h2>Lepton theme settings</h2>
-              <hr class="my-4" />
-
-              <form id="LeptonThemeSettingsForm" novalidate="novalidate">
-                <div class="row">
-                  <div class="col col-md-12">
-                    <div>
-                      <div class="form-group">
-                        <label for="MenuPlacement">Menu placement</label>
-                        <select
-                          class="custom-select form-control"
-                          data-val="true"
-                          data-val-required="The Menu placement field is required."
-                          id="MenuPlacement"
-                          name="MenuPlacement"
-                          ><option selected="selected" value="0">Left</option>
-                          <option value="1">Top</option>
-                        </select>
-
-                        <span
-                          class="text-danger field-validation-valid"
-                          data-valmsg-for="MenuPlacement"
-                          data-valmsg-replace="true"
-                        ></span>
-                      </div>
-                      <div class="form-group">
-                        <label for="MenuStatus">Menu status</label>
-                        <select
-                          class="custom-select form-control"
-                          data-val="true"
-                          data-val-required="The Menu status field is required."
-                          id="MenuStatus"
-                          name="MenuStatus"
-                          ><option selected="selected" value="0">Always opened</option>
-                          <option value="1">Open on hover</option>
-                        </select>
-
-                        <span
-                          class="text-danger field-validation-valid"
-                          data-valmsg-for="MenuStatus"
-                          data-valmsg-replace="true"
-                        ></span>
-                      </div>
-                      <div class="custom-checkbox custom-control mb-2">
-                        <input
-                          type="checkbox"
-                          data-val="true"
-                          data-val-required="The Boxed layout field is required."
-                          id="BoxedLayout"
-                          name="BoxedLayout"
-                          value="true"
-                          class="custom-control-input "
-                        /><label class="custom-control-label" for="BoxedLayout">Boxed layout</label>
-                      </div>
-                    </div>
-                    <hr class="my-4" />
-                    <div>
-                      <button type="submit" class="btn btn-primary" data-busy-text="Processing...">
-                        <i class="fa fa-save"></i> Save
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <input name="BoxedLayout" type="hidden" value="false" />
-              </form>
-            </div>
-            <div
-              class="tab-pane fade  "
-              id="T515ccf3324254f41a4a9a6b34b0dae56_2"
-              role="tabpanel"
-              aria-labelledby="T515ccf3324254f41a4a9a6b34b0dae56_2-tab"
-            >
-              <h2>Account</h2>
-              <hr class="my-4" />
-
-              <form id="AccountSettingsForm" novalidate="novalidate">
-                <div class="row">
-                  <div class="col-md-12">
-                    <div>
-                      <div class="custom-checkbox custom-control mb-2">
-                        <input
-                          type="checkbox"
-                          checked="checked"
-                          data-val="true"
-                          data-val-required="The Is self registration enabled field is required."
-                          id="IsSelfRegistrationEnabled"
-                          name="IsSelfRegistrationEnabled"
-                          value="true"
-                          class="custom-control-input "
-                        /><label class="custom-control-label" for="IsSelfRegistrationEnabled"
-                          >Is self registration enabled</label
-                        >
-                      </div>
-                    </div>
-                    <hr class="my-4" />
-                    <div>
-                      <h4>Two factor login settings</h4>
-                      <div class="custom-checkbox custom-control mb-2">
-                        <input
-                          type="checkbox"
-                          checked="checked"
-                          data-val="true"
-                          data-val-required="The Is remember browser enabled field is required."
-                          id="IsRememberBrowserEnabled"
-                          name="IsRememberBrowserEnabled"
-                          value="true"
-                          class="custom-control-input "
-                        /><label class="custom-control-label" for="IsRememberBrowserEnabled"
-                          >Is remember browser enabled</label
-                        >
-                      </div>
-                    </div>
-                    <hr class="my-4" />
-                    <div>
-                      <button type="submit" class="btn btn-primary" data-busy-text="Processing...">
-                        <i class="fa fa-save"></i> Save
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <input name="IsSelfRegistrationEnabled" type="hidden" value="false" /><input
-                  name="IsRememberBrowserEnabled"
-                  type="hidden"
-                  value="false"
-                />
-              </form>
+              <ng-container
+                *ngComponentOutlet="selected.component"
+                [abpPermission]="selected.requiredPolicy"
+              ></ng-container>
             </div>
           </div>
         </div>

npm/ng-packs/packages/setting-management/src/lib/components/setting/setting.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { SettingTab } from '@abp/ng.theme.shared';
+import { SettingTab, fade } from '@abp/ng.theme.shared';
 import { InitialService } from '../services/initial.service';
 
 @Component({

npm/ng-packs/packages/setting-management/src/lib/root-setting-management.module.ts

@@ -0,0 +1,11 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+@NgModule({})
+export class RootSettingManagementModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: RootSettingManagementModule,
+      providers: [],
+    };
+  }
+}

npm/ng-packs/packages/setting-management/src/public-api.ts

@@ -1,3 +1,4 @@
+export * from './lib/root-setting-management.module';
 export * from './lib/setting-management.module';
 export * from './lib/components';
 export * from './lib/constants';

npm/ng-packs/packages/tenant-management/src/lib/root-tenant-management.module.ts

@@ -0,0 +1,11 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+@NgModule({})
+export class RootTenantManagementModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: RootTenantManagementModule,
+      providers: [],
+    };
+  }
+}

npm/ng-packs/packages/tenant-management/src/public-api.ts

@@ -1,3 +1,4 @@
+export * from './lib/root-tenant-management.module';
 export * from './lib/tenant-management.module';
 export * from './lib/actions';
 export * from './lib/components';

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

@@ -44,10 +44,10 @@ export function appendScript(injector: Injector) {
       targetSelector: '.form-group',
       blueprints: {
         email: `AbpAccount::ThisFieldIsNotAValidEmailAddress.`,
-        max: `AbpAccount::ThisFieldMustBeAStringWithAMaximumLengthOf{1}[{{ max }}]`,
+        max: `AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]`,
         maxlength: `AbpAccount::ThisFieldMustBeAStringWithAMaximumLengthOf{1}[{{ requiredLength }}]`,
-        min: `AbpAccount::ThisFieldMustBeAStringWithAMinimumLengthOf{1}AndAMaximumLengthOf{0}[{{ min }},{{ max }}]`,
-        minlength: `AbpAccount::ThisFieldMustBeAStringWithAMinimumLengthOf{1}AndAMaximumLengthOf{0}[{{ min }},{{ max }}]`,
+        min: `AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]`,
+        minlength: `AbpAccount::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf[{{ min }},{{ max }}]`,
         required: `AbpAccount::ThisFieldIsRequired.`,
         passwordMismatch: `AbpIdentity::Identity.PasswordConfirmationFailed`,
       },

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

@@ -11,6 +11,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { RootAccountModule } from '@abp/ng.account';
+import { RootIdentityModule } from '@abp/ng.identity';
+import { RootTenantManagementModule } from '@abp/ng.tenant-management';
 
 @NgModule({
   declarations: [AppComponent],
@@ -26,6 +29,10 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared';
         layouts: LAYOUTS,
       },
     }),
+    RootAccountModule.forRoot({ redirectUrl: '/' }),
+    RootIdentityModule.forRoot(),
+    RootTenantManagementModule.forRoot(),
+
     OAuthModule.forRoot(),
     NgxsModule.forRoot([]),
     NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),