[EC-8] Add lazy loading to org billing

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

@@ -0,0 +1,47 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "@bitwarden/common/enums/permissions";
+
+import { PermissionsGuard } from "../../../organizations/guards/permissions.guard";
+import { NavigationPermissionsService } from "../../../organizations/services/navigation-permissions.service";
+import { BillingHistoryComponent } from "../../../settings/billing-history.component";
+import { PaymentMethodComponent } from "../../../settings/payment-method.component";
+
+import { OrganizationBillingTabComponent } from "./organization-billing-tab.component";
+import { OrganizationSubscriptionComponent } from "./organization-subscription.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: OrganizationBillingTabComponent,
+    canActivate: [PermissionsGuard],
+    data: { permissions: NavigationPermissionsService.getPermissions("billing") },
+    children: [
+      { path: "", pathMatch: "full", redirectTo: "subscription" },
+      {
+        path: "subscription",
+        component: OrganizationSubscriptionComponent,
+        data: { titleId: "subscription" },
+      },
+      {
+        path: "payment-method",
+        component: PaymentMethodComponent,
+        canActivate: [PermissionsGuard],
+        data: { titleId: "paymentMethod", permissions: [Permissions.ManageBilling] },
+      },
+      {
+        path: "history",
+        component: BillingHistoryComponent,
+        canActivate: [PermissionsGuard],
+        data: { titleId: "billingHistory", permissions: [Permissions.ManageBilling] },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class OrganizationBillingRoutingModule {}

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

@@ -4,20 +4,16 @@ import { LooseComponentsModule } from "../../loose-components.module";
 import { SharedModule } from "../../shared.module";
 
 import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
+import { OrganizationBillingRoutingModule } from "./organization-billing-routing.module";
 import { OrganizationBillingTabComponent } from "./organization-billing-tab.component";
 import { OrganizationSubscriptionComponent } from "./organization-subscription.component";
 
 @NgModule({
-  imports: [SharedModule, LooseComponentsModule],
+  imports: [SharedModule, LooseComponentsModule, OrganizationBillingRoutingModule],
   declarations: [
     BillingSyncApiKeyComponent,
     OrganizationBillingTabComponent,
     OrganizationSubscriptionComponent,
   ],
-  exports: [
-    BillingSyncApiKeyComponent,
-    OrganizationBillingTabComponent,
-    OrganizationSubscriptionComponent,
-  ],
 })
 export class OrganizationBillingModule {}

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

@@ -2,13 +2,8 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { AuthGuard } from "@bitwarden/angular/guards/auth.guard";
-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 { 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";
@@ -75,29 +70,10 @@ const routes: Routes = [
       },
       {
         path: "billing",
-        component: OrganizationBillingTabComponent,
+        loadChildren: () =>
-        canActivate: [PermissionsGuard],
+          import("../modules/organizations/billing/organization-billing.module").then(
-        data: { permissions: NavigationPermissionsService.getPermissions("billing") },
+            (m) => m.OrganizationBillingModule
-        children: [
+          ),
-          { path: "", pathMatch: "full", redirectTo: "subscription" },
-          {
-            path: "subscription",
-            component: OrganizationSubscriptionComponent,
-            data: { titleId: "subscription" },
-          },
-          {
-            path: "payment-method",
-            component: PaymentMethodComponent,
-            canActivate: [PermissionsGuard],
-            data: { titleId: "paymentMethod", permissions: [Permissions.ManageBilling] },
-          },
-          {
-            path: "history",
-            component: BillingHistoryComponent,
-            canActivate: [PermissionsGuard],
-            data: { titleId: "billingHistory", permissions: [Permissions.ManageBilling] },
-          },
-        ],
       },
     ],
   },

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

@@ -1,7 +1,6 @@
 import { NgModule } from "@angular/core";
 
 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 { OrganizationUserModule } from "./modules/organizations/users/organization-user.module";
@@ -22,7 +21,6 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     OrganizationManageModule,
     OrganizationUserModule,
     OrganizationCreateModule,
-    OrganizationBillingModule,
   ],
   exports: [
     SharedModule,