added lazy loading

Presentation/Hims.Admin/src/app/app.module.ts

@@ -9,8 +9,6 @@ import { AppConfig, AppData } from "@shared/services";
 import { SharedModule } from "@shared/shared.module";
 import { OTPWidget } from "@shared/widgets";
 import { LayoutComponent } from './areas/layout/layout.component';
-import { MastersPage } from './areas/admin/masters/masters.page';
-import { CubiclePage } from './areas/admin/masters/pages/cubicle/cubicle.page';
 
 const widgets = [OTPWidget];
 const components = [AvatarImageComponent, SymptomsViewComponent];
@@ -25,8 +23,6 @@ const components = [AvatarImageComponent, SymptomsViewComponent];
     declarations: [
         AppComponent,
         LayoutComponent,
-        MastersPage,
-        CubiclePage,
         widgets,
         components,
         routePages,

Presentation/Hims.Admin/src/app/app.routing.module.ts

@@ -2,13 +2,11 @@ import { ForgotPasswordPage } from "@account/forgot-password/forgot-password.pag
 import { LoginPage } from "@account/login/login.page";
 import { AccountsPage } from "@admin/accounts/accounts.page";
 import { NgModule } from "@angular/core";
-import { Route, RouterModule, Routes } from "@angular/router";
+import { RouterModule, Routes } from "@angular/router";
 import { NotFoundPage } from "@error/not-found/not-found.page";
 import { ServerErrorPage } from "@error/server-error/server-error.page";
 import { AccessGuard, AuthGuard, DeactivateGuard, TelemedicineGuard } from "@shared/guards";
 import { LayoutComponent } from "./areas/layout/layout.component";
-import { MastersPage } from "./areas/admin/masters/masters.page";
-import { CubiclePage } from "./areas/admin/masters/pages/cubicle/cubicle.page";
 
 // STARTING PAGES
 const startingRoutes = [
@@ -24,20 +22,6 @@ const errorRoutes = [
 ]
 const errorRouteComponents = [NotFoundPage, ServerErrorPage];
 
-// MASTERS
-const masterPages = {
-    path: "masters",
-    data: { title: "Masters" },
-    canActivate: [AuthGuard],
-    canActivateChild: [AuthGuard],
-    component: MastersPage,
-    children: [
-        { path: "", redirectTo: "accounts", pathMatch: "full" },
-        { path: "cubicle", component: CubiclePage, data: { title: "cubicle" } },
-        { path: "**", redirectTo: "accounts" },
-    ]
-}
-
 // HIDDEN PAGES
 const hiddenPages = [
     { path: "accounts", component: AccountsPage, data: { title: "Accounts", } }
@@ -56,7 +40,10 @@ const routes: Routes = [
         children: [
             { path: "", redirectTo: "dashboard", pathMatch: "full" },
             ...hiddenPages,
-            masterPages as Route
+            {
+                path: "masters",
+                loadChildren: () => import('./areas/admin/masters/masters.module').then(m => m.MastersModule)
+            },
         ]
     },
     { path: "**", redirectTo: "not-found" },

Presentation/Hims.Admin/src/app/areas/admin/masters/masters.module.ts

+import { NgModule } from '@angular/core';
+import { MastersPage } from './masters.page';
+import { CubiclePage } from './pages/cubicle/cubicle.page';
+import { SharedModule } from '@src/app/shared/shared.module';
+import { MastersRoutingModule } from './masters.routing.module';
+
+@NgModule({
+  declarations: [
+    MastersPage,
+    CubiclePage
+  ],
+  imports: [
+    MastersRoutingModule,
+    SharedModule
+  ]
+})
+export class MastersModule { }

Presentation/Hims.Admin/src/app/areas/admin/masters/masters.routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CubiclePage } from './pages/cubicle/cubicle.page';
+import { MastersPage } from './masters.page';
+import { AuthGuard } from '@src/app/shared/guards';
+
+const routes: Routes = [
+  {
+    path: "",
+    data: { title: "Masters" },
+    canActivate: [AuthGuard],
+    canActivateChild: [AuthGuard],
+    component: MastersPage,
+    children: [
+        { path: "", redirectTo: "cubicle", pathMatch: "full" },
+        { path: "cubicle", component: CubiclePage, data: { title: "cubicle" } },
+        { path: "**", redirectTo: "cubicle" },
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MastersRoutingModule { }

Presentation/Hims.Admin/src/index.html

 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="Careaxes">
-    <meta name="author" content="Careaxes">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="description" content="Careaxes" />
+    <meta name="author" content="Careaxes" />
     <title>Careaxes</title>
-    <base href="/">
-    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png" />
+    <base href="/" />
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="assets/images/favicon.png"
+    />
     <link rel="stylesheet" type="text/css" href="assets/fonts/style.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/toastr.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/app.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
-</head>
+  </head>
 
-<body data-layout-mode="two-column" data-sidebar-size="condensed" data-sidebar-color="light" data-layout-width="fluid" data-layout-menu-position="fixed" data-sidebar-showuser="false" data-topbar-color="light" onmousemove="showCoords(event)" onclick="sidebarEnable1(event); leave1(event); show(event);" onresize="hide(event);">
+  <body
+    data-layout-mode="two-column"
+    data-sidebar-size="condensed"
+    data-sidebar-color="light"
+    data-layout-width="fluid"
+    data-layout-menu-position="fixed"
+    data-sidebar-showuser="false"
+    data-topbar-color="light"
+  >
     <app-root></app-root>
-</body>
-
+  </body>
 </html>