Create SettingsRoutingModule, lazy load

src/app/organizations/organizations-routing.module.ts

@@ -107,29 +107,7 @@ const routes: Routes = [
       },
       {
         path: "settings",
-        component: SettingsComponent,
+        loadChildren: async () => (await import("./settings/settings.module")).SettingsModule,
-        canActivate: [PermissionsGuard],
-        data: { permissions: NavigationPermissionsService.getPermissions("settings") },
-        children: [
-          { path: "", pathMatch: "full", redirectTo: "account" },
-          { path: "account", component: AccountComponent, data: { titleId: "myOrganization" } },
-          {
-            path: "two-factor",
-            component: TwoFactorSetupComponent,
-            data: { titleId: "twoStepLogin" },
-          },
-          {
-            path: "billing",
-            component: BillingComponent,
-            canActivate: [PermissionsGuard],
-            data: { titleId: "billing", permissions: [Permissions.ManageBilling] },
-          },
-          {
-            path: "subscription",
-            component: SubscriptionComponent,
-            data: { titleId: "subscription" },
-          },
-        ],
       },
     ],
   },

src/app/organizations/settings/settings-routing.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "jslib-common/enums/permissions";
+
+import { PermissionsGuard } from "../guards/permissions.guard";
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
+
+import { AccountComponent } from "./account.component";
+import { BillingComponent } from "./billing.component";
+import { SettingsComponent } from "./settings.component";
+import { SubscriptionComponent } from "./subscription.component";
+import { TwoFactorSetupComponent } from "./two-factor-setup.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: SettingsComponent,
+    canActivate: [PermissionsGuard],
+    data: { permissions: NavigationPermissionsService.getPermissions("settings") },
+    children: [
+      { path: "", pathMatch: "full", redirectTo: "account" },
+      { path: "account", component: AccountComponent, data: { titleId: "myOrganization" } },
+      {
+        path: "two-factor",
+        component: TwoFactorSetupComponent,
+        data: { titleId: "twoStepLogin" },
+      },
+      {
+        path: "billing",
+        component: BillingComponent,
+        canActivate: [PermissionsGuard],
+        data: { titleId: "billing", permissions: [Permissions.ManageBilling] },
+      },
+      {
+        path: "subscription",
+        component: SubscriptionComponent,
+        data: { titleId: "subscription" },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingsRoutingModule {}

src/app/organizations/settings/settings.module.ts

@@ -11,12 +11,13 @@ import { ChangePlanComponent } from "./change-plan.component";
 import { DeleteOrganizationComponent } from "./delete-organization.component";
 import { DownloadLicenseComponent } from "./download-license.component";
 import { ImageSubscriptionHiddenComponent } from "./image-subscription-hidden.component";
+import { SettingsRoutingModule } from "./settings-routing.module";
 import { SettingsComponent } from "./settings.component";
 import { SubscriptionComponent } from "./subscription.component";
 import { TwoFactorSetupComponent } from "./two-factor-setup.component";
 
 @NgModule({
-  imports: [CommonModule, SharedModule],
+  imports: [CommonModule, SharedModule, SettingsRoutingModule],
   declarations: [
     AccountComponent,
     AdjustSubscription,