[EC-8] Add lazy loading to org reports

apps/web/src/app/modules/organizations/reporting/organization-reporting-routing.module.ts

@@ -0,0 +1,99 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "@bitwarden/common/enums/permissions";
+
+
+import { EventsComponent } from "../../../organizations//manage/events.component";
+import { PermissionsGuard } from "../../../organizations/guards/permissions.guard";
+import { NavigationPermissionsService } from "../../../organizations/services/navigation-permissions.service";
+import { ExposedPasswordsReportComponent } from "../../../organizations/tools/exposed-passwords-report.component";
+import { InactiveTwoFactorReportComponent } from "../../../organizations/tools/inactive-two-factor-report.component";
+import { ReusedPasswordsReportComponent } from "../../../organizations/tools/reused-passwords-report.component";
+import { UnsecuredWebsitesReportComponent } from "../../../organizations/tools/unsecured-websites-report.component";
+import { WeakPasswordsReportComponent } from "../../../organizations/tools/weak-passwords-report.component";
+
+import { ReportListComponent } from "./report-list.component";
+import { ReportingComponent } from "./reporting.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: ReportingComponent,
+    canActivate: [PermissionsGuard],
+    data: { permissions: NavigationPermissionsService.getPermissions("reporting") },
+    children: [
+      { path: "", pathMatch: "full", redirectTo: "reports" },
+      {
+        path: "reports",
+        component: ReportListComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "reports",
+          permissions: [Permissions.AccessReports],
+        },
+        children: [
+          {
+            path: "exposed-passwords-report",
+            component: ExposedPasswordsReportComponent,
+            canActivate: [PermissionsGuard],
+            data: {
+              titleId: "exposedPasswordsReport",
+              permissions: [Permissions.AccessReports],
+            },
+          },
+          {
+            path: "inactive-two-factor-report",
+            component: InactiveTwoFactorReportComponent,
+            canActivate: [PermissionsGuard],
+            data: {
+              titleId: "inactive2faReport",
+              permissions: [Permissions.AccessReports],
+            },
+          },
+          {
+            path: "reused-passwords-report",
+            component: ReusedPasswordsReportComponent,
+            canActivate: [PermissionsGuard],
+            data: {
+              titleId: "reusedPasswordsReport",
+              permissions: [Permissions.AccessReports],
+            },
+          },
+          {
+            path: "unsecured-websites-report",
+            component: UnsecuredWebsitesReportComponent,
+            canActivate: [PermissionsGuard],
+            data: {
+              titleId: "unsecuredWebsitesReport",
+              permissions: [Permissions.AccessReports],
+            },
+          },
+          {
+            path: "weak-passwords-report",
+            component: WeakPasswordsReportComponent,
+            canActivate: [PermissionsGuard],
+            data: {
+              titleId: "weakPasswordsReport",
+              permissions: [Permissions.AccessReports],
+            },
+          },
+        ],
+      },
+      {
+        path: "events",
+        component: EventsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "eventLogs",
+          permissions: [Permissions.AccessEventLogs],
+        },
+      },
+    ],
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class OrganizationReportingRoutingModule {}

apps/web/src/app/modules/organizations/reporting/organization-reporting.module.ts

@@ -3,12 +3,12 @@ import { NgModule } from "@angular/core";
 import { LooseComponentsModule } from "../../loose-components.module";
 import { SharedModule } from "../../shared.module";
 
+import { OrganizationReportingRoutingModule } from "./organization-reporting-routing.module";
 import { ReportListComponent } from "./report-list.component";
 import { ReportingComponent } from "./reporting.component";
 
 @NgModule({
-  imports: [SharedModule, LooseComponentsModule],
+  imports: [SharedModule, LooseComponentsModule, OrganizationReportingRoutingModule],
   declarations: [ReportListComponent, ReportingComponent],
-  exports: [ReportListComponent, ReportingComponent],
 })
 export class OrganizationReportingModule {}

apps/web/src/app/organizations/organization-routing.module.ts

@@ -6,26 +6,18 @@ import { Permissions } from "@bitwarden/common/enums/permissions";
 
 import { OrganizationBillingTabComponent } from "../modules/organizations/billing/organization-billing-tab.component";
 import { OrganizationSubscriptionComponent } from "../modules/organizations/billing/organization-subscription.component";
-import { ReportListComponent } from "../modules/organizations/reporting/report-list.component";
-import { ReportingComponent } from "../modules/organizations/reporting/reporting.component";
 import { OrganizationVaultModule } from "../modules/vault/modules/organization-vault/organization-vault.module";
 import { BillingHistoryComponent } from "../settings/billing-history.component";
 import { PaymentMethodComponent } from "../settings/payment-method.component";
 
 import { PermissionsGuard } from "./guards/permissions.guard";
 import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
-import { EventsComponent } from "./manage/events.component";
 import { GroupsComponent } from "./manage/groups.component";
 import { PeopleComponent } from "./manage/people.component";
 import { NavigationPermissionsService } from "./services/navigation-permissions.service";
 import { AccountComponent } from "./settings/account.component";
 import { SettingsComponent } from "./settings/settings.component";
 import { TwoFactorSetupComponent } from "./settings/two-factor-setup.component";
-import { ExposedPasswordsReportComponent } from "./tools/exposed-passwords-report.component";
-import { InactiveTwoFactorReportComponent } from "./tools/inactive-two-factor-report.component";
-import { ReusedPasswordsReportComponent } from "./tools/reused-passwords-report.component";
-import { UnsecuredWebsitesReportComponent } from "./tools/unsecured-websites-report.component";
-import { WeakPasswordsReportComponent } from "./tools/weak-passwords-report.component";
 
 const routes: Routes = [
   {
@@ -76,77 +68,10 @@ const routes: Routes = [
       },
       {
         path: "reporting",
-        component: ReportingComponent,
+        loadChildren: () =>
-        canActivate: [PermissionsGuard],
+          import("../modules/organizations/reporting/organization-reporting.module").then(
-        data: { permissions: NavigationPermissionsService.getPermissions("reporting") },
+            (m) => m.OrganizationReportingModule
-        children: [
+          ),
-          { path: "", pathMatch: "full", redirectTo: "reports" },
-          {
-            path: "reports",
-            component: ReportListComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "reports",
-              permissions: [Permissions.AccessReports],
-            },
-            children: [
-              {
-                path: "exposed-passwords-report",
-                component: ExposedPasswordsReportComponent,
-                canActivate: [PermissionsGuard],
-                data: {
-                  titleId: "exposedPasswordsReport",
-                  permissions: [Permissions.AccessReports],
-                },
-              },
-              {
-                path: "inactive-two-factor-report",
-                component: InactiveTwoFactorReportComponent,
-                canActivate: [PermissionsGuard],
-                data: {
-                  titleId: "inactive2faReport",
-                  permissions: [Permissions.AccessReports],
-                },
-              },
-              {
-                path: "reused-passwords-report",
-                component: ReusedPasswordsReportComponent,
-                canActivate: [PermissionsGuard],
-                data: {
-                  titleId: "reusedPasswordsReport",
-                  permissions: [Permissions.AccessReports],
-                },
-              },
-              {
-                path: "unsecured-websites-report",
-                component: UnsecuredWebsitesReportComponent,
-                canActivate: [PermissionsGuard],
-                data: {
-                  titleId: "unsecuredWebsitesReport",
-                  permissions: [Permissions.AccessReports],
-                },
-              },
-              {
-                path: "weak-passwords-report",
-                component: WeakPasswordsReportComponent,
-                canActivate: [PermissionsGuard],
-                data: {
-                  titleId: "weakPasswordsReport",
-                  permissions: [Permissions.AccessReports],
-                },
-              },
-            ],
-          },
-          {
-            path: "events",
-            component: EventsComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "eventLogs",
-              permissions: [Permissions.AccessEventLogs],
-            },
-          },
-        ],
       },
       {
         path: "billing",

apps/web/src/app/oss.module.ts

@@ -4,7 +4,6 @@ import { LooseComponentsModule } from "./modules/loose-components.module";
 import { OrganizationBillingModule } from "./modules/organizations/billing/organization-billing.module";
 import { OrganizationCreateModule } from "./modules/organizations/create/organization-create.module";
 import { OrganizationManageModule } from "./modules/organizations/manage/organization-manage.module";
-import { OrganizationReportingModule } from "./modules/organizations/reporting/organization-reporting.module";
 import { OrganizationUserModule } from "./modules/organizations/users/organization-user.module";
 import { PipesModule } from "./modules/pipes/pipes.module";
 import { SharedModule } from "./modules/shared.module";
@@ -24,7 +23,6 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     OrganizationUserModule,
     OrganizationCreateModule,
     OrganizationBillingModule,
-    OrganizationReportingModule,
   ],
   exports: [
     SharedModule,