[PM-25203] Resolve circular dependencies through LooseComponentsModule (#16157)

* Update modules to not import loose-components

Instead they should import their dependencies directly.
Only OssModule imports loose-components.module.ts.

* Remove unused imports and exports

apps/web/src/app/admin-console/organizations/collections/vault.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from "@angular/core";
 
-import { LooseComponentsModule } from "../../../shared/loose-components.module";
 import { SharedModule } from "../../../shared/shared.module";
 import { OrganizationBadgeModule } from "../../../vault/individual-vault/organization-badge/organization-badge.module";
 import { ViewComponent } from "../../../vault/individual-vault/view.component";
@@ -15,7 +14,6 @@ import { VaultComponent } from "./vault.component";
   imports: [
     VaultRoutingModule,
     SharedModule,
-    LooseComponentsModule,
     GroupBadgeModule,
     CollectionNameBadgeComponent,
     OrganizationBadgeModule,

apps/web/src/app/admin-console/organizations/members/members.module.ts

@@ -6,7 +6,7 @@ import { PasswordCalloutComponent } from "@bitwarden/auth/angular";
 import { ScrollLayoutDirective } from "@bitwarden/components";
 import { OrganizationFreeTrialWarningComponent } from "@bitwarden/web-vault/app/billing/organizations/warnings/components";
 
-import { LooseComponentsModule } from "../../../shared";
+import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedOrganizationModule } from "../shared";
 
 import { BulkConfirmDialogComponent } from "./components/bulk/bulk-confirm-dialog.component";
@@ -22,10 +22,10 @@ import { MembersComponent } from "./members.component";
 @NgModule({
   imports: [
     SharedOrganizationModule,
-    LooseComponentsModule,
     MembersRoutingModule,
     UserDialogModule,
     PasswordCalloutComponent,
+    HeaderModule,
     ScrollingModule,
     PasswordStrengthV2Component,
     ScrollLayoutDirective,

apps/web/src/app/admin-console/organizations/organization.module.ts

@@ -4,7 +4,7 @@ import { NgModule } from "@angular/core";
 import { ScrollLayoutDirective } from "@bitwarden/components";
 import { OrganizationWarningsModule } from "@bitwarden/web-vault/app/billing/organizations/warnings/organization-warnings.module";
 
-import { LooseComponentsModule } from "../../shared";
+import { HeaderModule } from "../../layouts/header/header.module";
 
 import { CoreOrganizationModule } from "./core";
 import { GroupAddEditComponent } from "./manage/group-add-edit.component";
@@ -19,7 +19,7 @@ import { AccessSelectorModule } from "./shared/components/access-selector";
     AccessSelectorModule,
     CoreOrganizationModule,
     OrganizationsRoutingModule,
-    LooseComponentsModule,
+    HeaderModule,
     ScrollingModule,
     ScrollLayoutDirective,
     OrganizationWarningsModule,

apps/web/src/app/admin-console/organizations/policies/policies.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 
-import { LooseComponentsModule, SharedModule } from "../../../shared";
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { SharedModule } from "../../../shared";
 
 import { DisableSendPolicyComponent } from "./disable-send.component";
 import { MasterPasswordPolicyComponent } from "./master-password.component";
@@ -17,7 +18,7 @@ import { SingleOrgPolicyComponent } from "./single-org.component";
 import { TwoFactorAuthenticationPolicyComponent } from "./two-factor-authentication.component";
 
 @NgModule({
-  imports: [SharedModule, LooseComponentsModule],
+  imports: [SharedModule, HeaderModule],
   declarations: [
     DisableSendPolicyComponent,
     MasterPasswordPolicyComponent,

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

@@ -1,19 +1,14 @@
 import { NgModule } from "@angular/core";
 
 import { ReportsSharedModule } from "../../../dirt/reports";
-import { LooseComponentsModule } from "../../../shared";
+import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared/shared.module";
 
 import { OrganizationReportingRoutingModule } from "./organization-reporting-routing.module";
 import { ReportsHomeComponent } from "./reports-home.component";
 
 @NgModule({
-  imports: [
-    SharedModule,
-    ReportsSharedModule,
-    OrganizationReportingRoutingModule,
-    LooseComponentsModule,
-  ],
+  imports: [SharedModule, ReportsSharedModule, OrganizationReportingRoutingModule, HeaderModule],
   declarations: [ReportsHomeComponent],
 })
 export class OrganizationReportingModule {}

apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts

@@ -2,8 +2,11 @@ import { NgModule } from "@angular/core";
 
 import { ItemModule } from "@bitwarden/components";
 
-import { LooseComponentsModule, SharedModule } from "../../../shared";
+import { DangerZoneComponent } from "../../../auth/settings/account/danger-zone.component";
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { SharedModule } from "../../../shared";
 import { AccountFingerprintComponent } from "../../../shared/components/account-fingerprint/account-fingerprint.component";
+import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 import { PoliciesModule } from "../../organizations/policies";
 
 import { AccountComponent } from "./account.component";
@@ -13,10 +16,12 @@ import { TwoFactorSetupComponent } from "./two-factor-setup.component";
 @NgModule({
   imports: [
     SharedModule,
-    LooseComponentsModule,
     PoliciesModule,
     OrganizationSettingsRoutingModule,
     AccountFingerprintComponent,
+    DangerZoneComponent,
+    HeaderModule,
+    PremiumBadgeComponent,
     ItemModule,
   ],
   declarations: [AccountComponent, TwoFactorSetupComponent],

apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts

@@ -33,8 +33,9 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { DialogRef, DialogService, ItemModule } from "@bitwarden/components";
 
-import { LooseComponentsModule } from "../../../shared/loose-components.module";
+import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared/shared.module";
+import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 
 import { TwoFactorRecoveryComponent } from "./two-factor-recovery.component";
 import { TwoFactorSetupAuthenticatorComponent } from "./two-factor-setup-authenticator.component";
@@ -47,7 +48,7 @@ import { TwoFactorVerifyComponent } from "./two-factor-verify.component";
 @Component({
   selector: "app-two-factor-setup",
   templateUrl: "two-factor-setup.component.html",
-  imports: [ItemModule, LooseComponentsModule, SharedModule],
+  imports: [ItemModule, HeaderModule, PremiumBadgeComponent, SharedModule],
 })
 export class TwoFactorSetupComponent implements OnInit, OnDestroy {
   organizationId: string;

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

@@ -4,7 +4,7 @@ import { NgModule } from "@angular/core";
 // eslint-disable-next-line no-restricted-imports
 import { BannerModule } from "../../../../../../libs/components/src/banner/banner.module";
 import { UserVerificationModule } from "../../auth/shared/components/user-verification";
-import { LooseComponentsModule } from "../../shared";
+import { HeaderModule } from "../../layouts/header/header.module";
 import { BillingSharedModule } from "../shared";
 
 import { AdjustSubscription } from "./adjust-subscription.component";
@@ -29,7 +29,7 @@ import { SubscriptionStatusComponent } from "./subscription-status.component";
     UserVerificationModule,
     BillingSharedModule,
     OrganizationPlansComponent,
-    LooseComponentsModule,
+    HeaderModule,
     BannerModule,
   ],
   declarations: [

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

@@ -3,7 +3,9 @@ import { NgModule } from "@angular/core";
 import { AuthModule } from "./auth";
 import { LoginModule } from "./auth/login/login.module";
 import { TrialInitiationModule } from "./billing/trial-initiation/trial-initiation.module";
-import { LooseComponentsModule, SharedModule } from "./shared";
+import { HeaderModule } from "./layouts/header/header.module";
+import { SharedModule } from "./shared";
+import { LooseComponentsModule } from "./shared/loose-components.module";
 import { AccessComponent } from "./tools/send/send-access/access.component";
 import { OrganizationBadgeModule } from "./vault/individual-vault/organization-badge/organization-badge.module";
 import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-filter.module";
@@ -15,6 +17,7 @@ import "./shared/locales";
   imports: [
     SharedModule,
     LooseComponentsModule,
+    HeaderModule,
     TrialInitiationModule,
     VaultFilterModule,
     OrganizationBadgeModule,
@@ -24,7 +27,7 @@ import "./shared/locales";
   ],
   exports: [
     SharedModule,
-    LooseComponentsModule,
+    HeaderModule,
     TrialInitiationModule,
     VaultFilterModule,
     OrganizationBadgeModule,

apps/web/src/app/shared/index.ts

@@ -1,2 +1 @@
 export * from "./shared.module";
-export * from "./loose-components.module";

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

@@ -1,18 +1,7 @@
 import { NgModule } from "@angular/core";
 
-import {
-  PasswordCalloutComponent,
-  UserVerificationFormInputComponent,
-  VaultTimeoutInputComponent,
-} from "@bitwarden/auth/angular";
-import { LayoutComponent, NavigationModule } from "@bitwarden/components";
-
-import { OrganizationLayoutComponent } from "../admin-console/organizations/layouts/organization-layout.component";
-import { VerifyRecoverDeleteOrgComponent } from "../admin-console/organizations/manage/verify-recover-delete-org.component";
 import { RecoverDeleteComponent } from "../auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "../auth/recover-two-factor.component";
-import { DangerZoneComponent } from "../auth/settings/account/danger-zone.component";
-import { UserVerificationModule } from "../auth/shared/components/user-verification";
 import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.component";
 import { FreeBitwardenFamiliesComponent } from "../billing/members/free-bitwarden-families.component";
@@ -30,33 +19,15 @@ import { UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent
 import { WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent } from "../dirt/reports/pages/organizations/weak-passwords-report.component";
 import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { HeaderModule } from "../layouts/header/header.module";
-import { PremiumBadgeComponent } from "../vault/components/premium-badge.component";
 import { OrganizationBadgeModule } from "../vault/individual-vault/organization-badge/organization-badge.module";
 import { PipesModule } from "../vault/individual-vault/pipes/pipes.module";
 
-import { AccountFingerprintComponent } from "./components/account-fingerprint/account-fingerprint.component";
 import { SharedModule } from "./shared.module";
 
 // Please do not add to this list of declarations - we should refactor these into modules when doing so makes sense until there are none left.
 // If you are building new functionality, please create or extend a feature module instead.
 @NgModule({
-  imports: [
-    SharedModule,
-    UserVerificationModule,
-    AccountFingerprintComponent,
-    OrganizationBadgeModule,
-    PipesModule,
-    PasswordCalloutComponent,
-    UserVerificationFormInputComponent,
-    DangerZoneComponent,
-    LayoutComponent,
-    NavigationModule,
-    HeaderModule,
-    OrganizationLayoutComponent,
-    VerifyRecoverDeleteOrgComponent,
-    VaultTimeoutInputComponent,
-    PremiumBadgeComponent,
-  ],
+  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule],
   declarations: [
     OrgExposedPasswordsReportComponent,
     OrgInactiveTwoFactorReportComponent,
@@ -73,25 +44,12 @@ import { SharedModule } from "./shared.module";
     VerifyRecoverDeleteComponent,
   ],
   exports: [
-    UserVerificationModule,
-    PremiumBadgeComponent,
-    OrganizationLayoutComponent,
-    OrgExposedPasswordsReportComponent,
-    OrgInactiveTwoFactorReportComponent,
-    OrgReusedPasswordsReportComponent,
-    OrgUnsecuredWebsitesReportComponent,
-    OrgWeakPasswordsReportComponent,
-    PremiumBadgeComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
     RemovePasswordComponent,
     SponsoredFamiliesComponent,
-    FreeBitwardenFamiliesComponent,
-    SponsoringOrgRowComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
-    HeaderModule,
-    DangerZoneComponent,
   ],
 })
 export class LooseComponentsModule {}

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

@@ -14,13 +14,14 @@ import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { ImportCollectionServiceAbstraction } from "@bitwarden/importer-core";
 import { ImportComponent } from "@bitwarden/importer-ui";
 
-import { LooseComponentsModule, SharedModule } from "../../shared";
+import { HeaderModule } from "../../layouts/header/header.module";
+import { SharedModule } from "../../shared";
 
 import { ImportCollectionAdminService } from "./import-collection-admin.service";
 
 @Component({
   templateUrl: "org-import.component.html",
-  imports: [SharedModule, ImportComponent, LooseComponentsModule],
+  imports: [SharedModule, ImportComponent, HeaderModule],
   providers: [
     {
       provide: ImportCollectionServiceAbstraction,

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

@@ -5,11 +5,12 @@ import { ActivatedRoute } from "@angular/router";
 
 import { ExportComponent } from "@bitwarden/vault-export-ui";
 
-import { LooseComponentsModule, SharedModule } from "../../shared";
+import { HeaderModule } from "../../layouts/header/header.module";
+import { SharedModule } from "../../shared";
 
 @Component({
   templateUrl: "org-vault-export.component.html",
-  imports: [SharedModule, ExportComponent, LooseComponentsModule],
+  imports: [SharedModule, ExportComponent, HeaderModule],
 })
 export class OrganizationVaultExportComponent implements OnInit {
   protected routeOrgId: string = null;

apps/web/src/app/vault/individual-vault/vault.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from "@angular/core";
 import { CollectionNameBadgeComponent } from "../../admin-console/organizations/collections";
 import { GroupBadgeModule } from "../../admin-console/organizations/collections/group-badge/group-badge.module";
 import { CollectionDialogComponent } from "../../admin-console/organizations/shared/components/collection-dialog";
-import { LooseComponentsModule, SharedModule } from "../../shared";
+import { SharedModule } from "../../shared";
 
 import { BulkDialogsModule } from "./bulk-action-dialogs/bulk-dialogs.module";
 import { OrganizationBadgeModule } from "./organization-badge/organization-badge.module";
@@ -20,7 +20,6 @@ import { ViewComponent } from "./view.component";
     CollectionNameBadgeComponent,
     PipesModule,
     SharedModule,
-    LooseComponentsModule,
     BulkDialogsModule,
     CollectionDialogComponent,
     VaultComponent,