[SM-44] Lazy loaded import and exporters (#2918)

apps/web/src/app/modules/loose-components.module.ts

@@ -69,9 +69,7 @@ import { SettingsComponent as OrgSettingComponent } from "../organizations/setti
 import { TwoFactorSetupComponent as OrgTwoFactorSetupComponent } from "../organizations/settings/two-factor-setup.component";
 import { AcceptFamilySponsorshipComponent } from "../organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "../organizations/sponsorships/families-for-enterprise-setup.component";
-import { ExportComponent as OrgExportComponent } from "../organizations/tools/export.component";
 import { ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent } from "../organizations/tools/exposed-passwords-report.component";
-import { ImportComponent as OrgImportComponent } from "../organizations/tools/import.component";
 import { InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent } from "../organizations/tools/inactive-two-factor-report.component";
 import { ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent } from "../organizations/tools/reused-passwords-report.component";
 import { ToolsComponent as OrgToolsComponent } from "../organizations/tools/tools.component";
@@ -143,9 +141,7 @@ import { UserBillingHistoryComponent } from "../settings/user-billing-history.co
 import { UserSubscriptionComponent } from "../settings/user-subscription.component";
 import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component";
 import { VerifyEmailComponent } from "../settings/verify-email.component";
-import { ExportComponent } from "../tools/export.component";
 import { GeneratorComponent } from "../tools/generator.component";
-import { ImportComponent } from "../tools/import.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component";
 import { ToolsComponent } from "../tools/tools.component";
 import { AddEditCustomFieldsComponent } from "../vault/add-edit-custom-fields.component";
@@ -214,14 +210,12 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     EmergencyAccessTakeoverComponent,
     EmergencyAccessViewComponent,
     EmergencyAddEditComponent,
-    ExportComponent,
     ExposedPasswordsReportComponent,
     FamiliesForEnterpriseSetupComponent,
     FolderAddEditComponent,
     FooterComponent,
     FrontendLayoutComponent,
     HintComponent,
-    ImportComponent,
     InactiveTwoFactorReportComponent,
     LockComponent,
     LoginComponent,
@@ -245,11 +239,9 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
     OrgEventsComponent,
-    OrgExportComponent,
     OrgExposedPasswordsReportComponent,
     OrgGroupAddEditComponent,
     OrgGroupsComponent,
-    OrgImportComponent,
     OrgInactiveTwoFactorReportComponent,
     OrgManageCollectionsComponent,
     OrgManageComponent,
@@ -374,14 +366,12 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     EmergencyAccessTakeoverComponent,
     EmergencyAccessViewComponent,
     EmergencyAddEditComponent,
-    ExportComponent,
     ExposedPasswordsReportComponent,
     FamiliesForEnterpriseSetupComponent,
     FolderAddEditComponent,
     FooterComponent,
     FrontendLayoutComponent,
     HintComponent,
-    ImportComponent,
     InactiveTwoFactorReportComponent,
     LockComponent,
     LoginComponent,
@@ -405,11 +395,9 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
     OrgEventsComponent,
-    OrgExportComponent,
     OrgExposedPasswordsReportComponent,
     OrgGroupAddEditComponent,
     OrgGroupsComponent,
-    OrgImportComponent,
     OrgInactiveTwoFactorReportComponent,
     OrgManageCollectionsComponent,
     OrgManageComponent,

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

@@ -4,6 +4,8 @@ import { RouterModule, Routes } from "@angular/router";
 import { AuthGuard } from "@bitwarden/angular/guards/auth.guard";
 import { Permissions } from "@bitwarden/common/enums/permissions";
 
+import { OrganizationVaultModule } from "../modules/vault/modules/organization-vault/organization-vault.module";
+
 import { PermissionsGuard } from "./guards/permissions.guard";
 import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
 import { CollectionsComponent } from "./manage/collections.component";
@@ -18,9 +20,7 @@ import { OrganizationBillingComponent } from "./settings/organization-billing.co
 import { OrganizationSubscriptionComponent } from "./settings/organization-subscription.component";
 import { SettingsComponent } from "./settings/settings.component";
 import { TwoFactorSetupComponent } from "./settings/two-factor-setup.component";
-import { ExportComponent } from "./tools/export.component";
 import { ExposedPasswordsReportComponent } from "./tools/exposed-passwords-report.component";
-import { ImportComponent } from "./tools/import.component";
 import { InactiveTwoFactorReportComponent } from "./tools/inactive-two-factor-report.component";
 import { ReusedPasswordsReportComponent } from "./tools/reused-passwords-report.component";
 import { ToolsComponent } from "./tools/tools.component";
@@ -39,9 +39,7 @@ const routes: Routes = [
       { path: "", pathMatch: "full", redirectTo: "vault" },
       {
         path: "vault",
-        loadChildren: async () =>
-          (await import("../modules/vault/modules/organization-vault/organization-vault.module"))
-            .OrganizationVaultModule,
+        loadChildren: () => OrganizationVaultModule,
       },
       {
         path: "tools",
@@ -55,22 +53,11 @@ const routes: Routes = [
             redirectTo: "import",
           },
           {
-            path: "import",
-            component: ImportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "importData",
-              permissions: [Permissions.AccessImportExport],
-            },
-          },
-          {
-            path: "export",
-            component: ExportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "exportVault",
-              permissions: [Permissions.AccessImportExport],
-            },
+            path: "",
+            loadChildren: () =>
+              import("./tools/import-export/org-import-export.module").then(
+                (m) => m.OrganizationImportExportModule
+              ),
           },
           {
             path: "exposed-passwords-report",

apps/web/src/app/organizations/tools/import-export/org-export.component.ts

@@ -11,13 +11,13 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
 import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service";
 
-import { ExportComponent as BaseExportComponent } from "../../tools/export.component";
+import { ExportComponent } from "../../../tools/import-export/export.component";
 
 @Component({
   selector: "app-org-export",
-  templateUrl: "../../tools/export.component.html",
+  templateUrl: "../../../tools/import-export/export.component.html",
 })
-export class ExportComponent extends BaseExportComponent {
+export class OrganizationExportComponent extends ExportComponent {
   constructor(
     cryptoService: CryptoService,
     i18nService: I18nService,

apps/web/src/app/organizations/tools/import-export/org-import-export-routing.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "@bitwarden/common/enums/permissions";
+
+import { PermissionsGuard } from "../../guards/permissions.guard";
+
+import { OrganizationExportComponent } from "./org-export.component";
+import { OrganizationImportComponent } from "./org-import.component";
+
+const routes: Routes = [
+  {
+    path: "import",
+    component: OrganizationImportComponent,
+    canActivate: [PermissionsGuard],
+    data: {
+      titleId: "importData",
+      permissions: [Permissions.AccessImportExport],
+    },
+  },
+  {
+    path: "export",
+    component: OrganizationExportComponent,
+    canActivate: [PermissionsGuard],
+    data: {
+      titleId: "exportVault",
+      permissions: [Permissions.AccessImportExport],
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class OrganizationImportExportRoutingModule {}

apps/web/src/app/organizations/tools/import-export/org-import-export.module.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
+import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
+import { FolderService } from "@bitwarden/common/abstractions/folder.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { ImportService as ImportServiceAbstraction } from "@bitwarden/common/abstractions/import.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { ImportService } from "@bitwarden/common/services/import.service";
+
+import { LooseComponentsModule } from "../../../modules/loose-components.module";
+
+import { OrganizationExportComponent } from "./org-export.component";
+import { OrganizationImportExportRoutingModule } from "./org-import-export-routing.module";
+import { OrganizationImportComponent } from "./org-import.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    JslibModule,
+    LooseComponentsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    OrganizationImportExportRoutingModule,
+  ],
+  declarations: [OrganizationImportComponent, OrganizationExportComponent],
+  providers: [
+    {
+      provide: ImportServiceAbstraction,
+      useClass: ImportService,
+      deps: [
+        CipherService,
+        FolderService,
+        ApiService,
+        I18nService,
+        CollectionService,
+        PlatformUtilsService,
+        CryptoService,
+      ],
+    },
+  ],
+})
+export class OrganizationImportExportModule {}

apps/web/src/app/organizations/tools/import-export/org-import.component.ts

@@ -8,13 +8,13 @@ import { OrganizationService } from "@bitwarden/common/abstractions/organization
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
 
-import { ImportComponent as BaseImportComponent } from "../../tools/import.component";
+import { ImportComponent } from "../../../tools/import-export/import.component";
 
 @Component({
   selector: "app-org-import",
-  templateUrl: "../../tools/import.component.html",
+  templateUrl: "../../../tools/import-export/import.component.html",
 })
-export class ImportComponent extends BaseImportComponent {
+export class OrganizationImportComponent extends ImportComponent {
   organizationName: string;
 
   constructor(

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

@@ -24,8 +24,11 @@ import { VerifyRecoverDeleteComponent } from "./accounts/verify-recover-delete.c
 import { HomeGuard } from "./guards/home.guard";
 import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";
 import { UserLayoutComponent } from "./layouts/user-layout.component";
+import { IndividualVaultModule } from "./modules/vault/modules/individual-vault/individual-vault.module";
+import { OrganizationsRoutingModule } from "./organizations/organization-routing.module";
 import { AcceptFamilySponsorshipComponent } from "./organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "./organizations/sponsorships/families-for-enterprise-setup.component";
+import { ReportsRoutingModule } from "./reports/reports-routing.module";
 import { AccessComponent } from "./send/access.component";
 import { SendComponent } from "./send/send.component";
 import { AccountComponent } from "./settings/account.component";
@@ -34,11 +37,11 @@ import { DomainRulesComponent } from "./settings/domain-rules.component";
 import { EmergencyAccessViewComponent } from "./settings/emergency-access-view.component";
 import { EmergencyAccessComponent } from "./settings/emergency-access.component";
 import { PreferencesComponent } from "./settings/preferences.component";
+import { SecurityRoutingModule } from "./settings/security-routing.module";
 import { SettingsComponent } from "./settings/settings.component";
 import { SponsoredFamiliesComponent } from "./settings/sponsored-families.component";
-import { ExportComponent } from "./tools/export.component";
+import { SubscriptionRoutingModule } from "./settings/subscription-routing.module";
 import { GeneratorComponent } from "./tools/generator.component";
-import { ImportComponent } from "./tools/import.component";
 import { ToolsComponent } from "./tools/tools.component";
 
 const routes: Routes = [
@@ -150,9 +153,7 @@ const routes: Routes = [
     children: [
       {
         path: "vault",
-        loadChildren: async () =>
-          (await import("./modules/vault/modules/individual-vault/individual-vault.module"))
-            .IndividualVaultModule,
+        loadChildren: () => IndividualVaultModule,
       },
       { path: "sends", component: SendComponent, data: { title: "Send" } },
       {
@@ -173,8 +174,7 @@ const routes: Routes = [
           },
           {
             path: "security",
-            loadChildren: async () =>
-              (await import("./settings/security-routing.module")).SecurityRoutingModule,
+            loadChildren: () => SecurityRoutingModule,
           },
           {
             path: "domain-rules",
@@ -183,8 +183,7 @@ const routes: Routes = [
           },
           {
             path: "subscription",
-            loadChildren: async () =>
-              (await import("./settings/subscription-routing.module")).SubscriptionRoutingModule,
+            loadChildren: () => SubscriptionRoutingModule,
           },
           {
             path: "emergency-access",
@@ -214,8 +213,13 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         children: [
           { path: "", pathMatch: "full", redirectTo: "generator" },
-          { path: "import", component: ImportComponent, data: { titleId: "importData" } },
-          { path: "export", component: ExportComponent, data: { titleId: "exportVault" } },
+          {
+            path: "",
+            loadChildren: () =>
+              import("./tools/import-export/import-export.module").then(
+                (m) => m.ImportExportModule
+              ),
+          },
           {
             path: "generator",
             component: GeneratorComponent,
@@ -225,18 +229,14 @@ const routes: Routes = [
       },
       {
         path: "reports",
-        loadChildren: async () =>
-          (await import("./reports/reports-routing.module")).ReportsRoutingModule,
+        loadChildren: () => ReportsRoutingModule,
       },
       { path: "setup/families-for-enterprise", component: FamiliesForEnterpriseSetupComponent },
     ],
   },
   {
     path: "organizations",
-    loadChildren: () =>
-      import("./organizations/organization-routing.module").then(
-        (m) => m.OrganizationsRoutingModule
-      ),
+    loadChildren: () => OrganizationsRoutingModule,
   },
 ];
 

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

@@ -11,13 +11,7 @@ import {
   MEMORY_STORAGE,
 } from "@bitwarden/angular/services/jslib-services.module";
 import { ModalService as ModalServiceAbstraction } from "@bitwarden/angular/services/modal.service";
-import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
-import { CipherService as CipherServiceAbstraction } from "@bitwarden/common/abstractions/cipher.service";
-import { CollectionService as CollectionServiceAbstraction } from "@bitwarden/common/abstractions/collection.service";
-import { CryptoService as CryptoServiceAbstraction } from "@bitwarden/common/abstractions/crypto.service";
-import { FolderService as FolderServiceAbstraction } from "@bitwarden/common/abstractions/folder.service";
 import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/abstractions/i18n.service";
-import { ImportService as ImportServiceAbstraction } from "@bitwarden/common/abstractions/import.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService as MessagingServiceAbstraction } from "@bitwarden/common/abstractions/messaging.service";
 import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/abstractions/passwordReprompt.service";
@@ -26,7 +20,6 @@ import { StateService as BaseStateServiceAbstraction } from "@bitwarden/common/a
 import { StateMigrationService as StateMigrationServiceAbstraction } from "@bitwarden/common/abstractions/stateMigration.service";
 import { AbstractStorageService } from "@bitwarden/common/abstractions/storage.service";
 import { StateFactory } from "@bitwarden/common/factories/stateFactory";
-import { ImportService } from "@bitwarden/common/services/import.service";
 import { MemoryStorageService } from "@bitwarden/common/services/memoryStorage.service";
 
 import { StateService as StateServiceAbstraction } from "../../abstractions/state.service";
@@ -95,19 +88,6 @@ import { RouterService } from "./router.service";
     },
     { provide: MessagingServiceAbstraction, useClass: BroadcasterMessagingService },
     { provide: ModalServiceAbstraction, useClass: ModalService },
-    {
-      provide: ImportServiceAbstraction,
-      useClass: ImportService,
-      deps: [
-        CipherServiceAbstraction,
-        FolderServiceAbstraction,
-        ApiServiceAbstraction,
-        I18nServiceAbstraction,
-        CollectionServiceAbstraction,
-        PlatformUtilsServiceAbstraction,
-        CryptoServiceAbstraction,
-      ],
-    },
     {
       provide: StateMigrationServiceAbstraction,
       useClass: StateMigrationService,

apps/web/src/app/tools/import-export/import-export-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { ExportComponent } from "./export.component";
+import { ImportComponent } from "./import.component";
+
+const routes: Routes = [
+  {
+    path: "import",
+    component: ImportComponent,
+    data: { titleId: "importData" },
+  },
+  {
+    path: "export",
+    component: ExportComponent,
+    data: { titleId: "exportVault" },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class ImportExportRoutingModule {}

apps/web/src/app/tools/import-export/import-export.module.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
+import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
+import { FolderService } from "@bitwarden/common/abstractions/folder.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { ImportService as ImportServiceAbstraction } from "@bitwarden/common/abstractions/import.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { ImportService } from "@bitwarden/common/services/import.service";
+
+import { LooseComponentsModule } from "../../modules/loose-components.module";
+
+import { ExportComponent } from "./export.component";
+import { ImportExportRoutingModule } from "./import-export-routing.module";
+import { ImportComponent } from "./import.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    JslibModule,
+    LooseComponentsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ImportExportRoutingModule,
+  ],
+  declarations: [ImportComponent, ExportComponent],
+  providers: [
+    {
+      provide: ImportServiceAbstraction,
+      useClass: ImportService,
+      deps: [
+        CipherService,
+        FolderService,
+        ApiService,
+        I18nService,
+        CollectionService,
+        PlatformUtilsService,
+        CryptoService,
+      ],
+    },
+  ],
+})
+export class ImportExportModule {}

apps/web/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../libs/shared/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
+    "module": "ES2020",
     "paths": {
       "tldjs": ["../../libs/common/src/misc/tldjs.noop"],
       "src/*": ["src/*"],

bitwarden_license/bit-web/src/app/app-routing.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
+import { ProvidersModule } from "./providers/providers.module";
+
 const routes: Routes = [
   {
     path: "providers",
-    loadChildren: async () => (await import("./providers/providers.module")).ProvidersModule,
+    loadChildren: () => ProvidersModule,
   },
 ];