chore: update packages (#3132)

* chore: update packages

* start tunnel messaging

* chore: standalone

* pbpaste instead

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

core/src/tunnel/web.rs

@@ -524,25 +524,25 @@ pub async fn init_web(ctx: CliContext) -> Result<(), Error> {
                     "To access your Web URL securely, trust your Root CA (displayed above) on your client device(s):\n",
                     "  - MacOS\n",
                     "    1. Open the Terminal app\n",
-                    "    2. Paste the following command (**DO NOT** click Return): pbcopy < ~/Desktop/ca.crt\n",
+                    "    2. Type or copy/paste the following command (**DO NOT** click Enter/Return yet): pbpaste > ~/Desktop/tunnel-ca.crt\n",
                     "    3. Copy your Root CA (including -----BEGIN CERTIFICATE----- and -----END CERTIFICATE-----)\n",
-                    "    4. Back in Terminal, click Return. ca.crt is saved to your Desktop\n",
+                    "    4. Back in Terminal, click Enter/Return. tunnel-ca.crt is saved to your Desktop\n",
                     "    5. Complete by trusting your Root CA: https://docs.start9.com/device-guides/mac/ca.html\n",
                     "  - Linux\n",
                     "    1. Open gedit, nano, or any editor\n",
                     "    2. Copy/paste your Root CA (including -----BEGIN CERTIFICATE----- and -----END CERTIFICATE-----)\n",
-                    "    3. Name the file ca.crt and save as plaintext\n",
+                    "    3. Name the file tunnel-ca.crt and save as plaintext\n",
                     "    4. Complete by trusting your Root CA: https://docs.start9.com/device-guides/linux/ca.html\n",
                     "  - Windows\n",
                     "    1. Open the Notepad app\n",
                     "    2. Copy/paste your Root CA (including -----BEGIN CERTIFICATE----- and -----END CERTIFICATE-----)\n",
-                    "    3. Name the file ca.crt and save as plaintext\n",
+                    "    3. Name the file tunnel-ca.crt and save as plaintext\n",
                     "    4. Complete by trusting your Root CA: https://docs.start9.com/device-guides/windows/ca.html\n",
                     "  - Android/Graphene\n",
-                    "    1. Send the ca.crt file (created above) to yourself\n",
+                    "    1. Send the tunnel-ca.crt file (created above) to yourself\n",
                     "    2. Complete by trusting your Root CA: https://docs.start9.com/device-guides/android/ca.html\n",
                     "  - iOS\n",
-                    "    1. Send the ca.crt file (created above) to yourself\n",
+                    "    1. Send the tunnel-ca.crt file (created above) to yourself\n",
                     "    2. Complete by trusting your Root CA: https://docs.start9.com/device-guides/ios/ca.html\n",
                 ));
 

web/package.json

@@ -33,34 +33,33 @@
     "format:check": "prettier --check projects/"
   },
   "dependencies": {
-    "@angular/animations": "^20.3.0",
+    "@angular/animations": "^21.2.1",
-    "@angular/cdk": "^20.1.0",
+    "@angular/cdk": "^21.2.1",
-    "@angular/common": "^20.3.0",
+    "@angular/common": "^21.2.1",
-    "@angular/compiler": "^20.3.0",
+    "@angular/compiler": "^21.2.1",
-    "@angular/core": "^20.3.0",
+    "@angular/core": "^21.2.1",
-    "@angular/forms": "^20.3.0",
+    "@angular/forms": "^21.2.1",
-    "@angular/platform-browser": "^20.3.0",
+    "@angular/platform-browser": "^21.2.1",
-    "@angular/platform-browser-dynamic": "^20.1.0",
+    "@angular/pwa": "^21.2.1",
-    "@angular/pwa": "^20.3.0",
+    "@angular/router": "^21.2.1",
-    "@angular/router": "^20.3.0",
+    "@angular/service-worker": "^21.2.1",
-    "@angular/service-worker": "^20.3.0",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@noble/curves": "^1.4.0",
     "@noble/hashes": "^1.4.0",
     "@start9labs/argon2": "^0.3.0",
     "@start9labs/start-sdk": "file:../sdk/baseDist",
-    "@taiga-ui/addon-charts": "4.66.0",
+    "@taiga-ui/addon-charts": "4.73.0",
-    "@taiga-ui/addon-commerce": "4.66.0",
+    "@taiga-ui/addon-commerce": "4.73.0",
-    "@taiga-ui/addon-mobile": "4.66.0",
+    "@taiga-ui/addon-mobile": "4.73.0",
-    "@taiga-ui/addon-table": "4.66.0",
+    "@taiga-ui/addon-table": "4.73.0",
-    "@taiga-ui/cdk": "4.66.0",
+    "@taiga-ui/cdk": "4.73.0",
-    "@taiga-ui/core": "4.66.0",
+    "@taiga-ui/core": "4.73.0",
     "@taiga-ui/dompurify": "4.1.11",
     "@taiga-ui/event-plugins": "4.7.0",
-    "@taiga-ui/experimental": "4.66.0",
+    "@taiga-ui/experimental": "4.73.0",
-    "@taiga-ui/icons": "4.66.0",
+    "@taiga-ui/icons": "4.73.0",
-    "@taiga-ui/kit": "4.66.0",
+    "@taiga-ui/kit": "4.73.0",
-    "@taiga-ui/layout": "4.66.0",
+    "@taiga-ui/layout": "4.73.0",
     "@taiga-ui/polymorpheus": "4.9.0",
     "ansi-to-html": "^0.7.2",
     "base64-js": "^1.5.1",
@@ -80,7 +79,7 @@
     "mime": "^4.0.3",
     "monaco-editor": "^0.33.0",
     "mustache": "^4.2.0",
-    "ng-qrcode": "^20.0.0",
+    "ng-qrcode": "^21.0.0",
     "node-jose": "^2.2.0",
     "patch-db-client": "file:../patch-db/client",
     "pbkdf2": "^3.1.2",
@@ -92,10 +91,10 @@
   },
   "devDependencies": {
     "@angular-experts/hawkeye": "^1.7.2",
-    "@angular/build": "^20.1.0",
+    "@angular/build": "^21.2.1",
-    "@angular/cli": "^20.1.0",
+    "@angular/cli": "^21.2.1",
-    "@angular/compiler-cli": "^20.1.0",
+    "@angular/compiler-cli": "^21.2.1",
-    "@angular/language-service": "^20.1.0",
+    "@angular/language-service": "^21.2.1",
     "@types/dompurify": "3.0.5",
     "@types/estree": "^0.0.51",
     "@types/js-yaml": "^4.0.5",
@@ -107,7 +106,7 @@
     "@types/uuid": "^8.3.1",
     "husky": "^4.3.8",
     "lint-staged": "^13.2.0",
-    "ng-packagr": "^20.1.0",
+    "ng-packagr": "^21.2.0",
     "node-html-parser": "^5.3.3",
     "postcss": "^8.4.21",
     "prettier": "^3.5.3",

web/projects/marketplace/src/components/menu/menu.component.module.ts

@@ -1,42 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import {
-  DocsLinkDirective,
-  i18nPipe,
-  SharedPipesModule,
-} from '@start9labs/shared'
-import {
-  TuiAppearance,
-  TuiButton,
-  TuiIcon,
-  TuiLoader,
-  TuiPopup,
-} from '@taiga-ui/core'
-import { TuiDrawer, TuiSkeleton } from '@taiga-ui/kit'
-import { CategoriesModule } from '../../pages/list/categories/categories.module'
-import { SearchModule } from '../../pages/list/search/search.module'
-import { StoreIconComponentModule } from '../store-icon/store-icon.component.module'
-import { MenuComponent } from './menu.component'
-
-@NgModule({
-  imports: [
-    CommonModule,
-    SharedPipesModule,
-    SearchModule,
-    CategoriesModule,
-    TuiLoader,
-    TuiButton,
-    CategoriesModule,
-    StoreIconComponentModule,
-    TuiAppearance,
-    TuiIcon,
-    TuiSkeleton,
-    TuiDrawer,
-    TuiPopup,
-    i18nPipe,
-    DocsLinkDirective,
-  ],
-  declarations: [MenuComponent],
-  exports: [MenuComponent],
-})
-export class MenuModule {}

web/projects/marketplace/src/components/menu/menu.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -6,16 +7,35 @@ import {
   OnDestroy,
   signal,
 } from '@angular/core'
+import { DocsLinkDirective, i18nPipe } from '@start9labs/shared'
+import { TuiAppearance, TuiButton, TuiIcon, TuiPopup } from '@taiga-ui/core'
+import { TuiDrawer, TuiSkeleton } from '@taiga-ui/kit'
 import { Subject, takeUntil } from 'rxjs'
+import { CategoriesComponent } from '../../pages/list/categories/categories.component'
+import { SearchComponent } from '../../pages/list/search/search.component'
 import { AbstractCategoryService } from '../../services/category.service'
 import { StoreDataWithUrl } from '../../types'
+import { StoreIconComponent } from '../store-icon.component'
 
 @Component({
   selector: 'menu',
   templateUrl: './menu.component.html',
   styleUrls: ['./menu.component.scss'],
+  imports: [
+    CommonModule,
+    SearchComponent,
+    CategoriesComponent,
+    TuiButton,
+    StoreIconComponent,
+    TuiAppearance,
+    TuiIcon,
+    TuiSkeleton,
+    TuiDrawer,
+    TuiPopup,
+    i18nPipe,
+    DocsLinkDirective,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class MenuComponent implements OnDestroy {
   @Input({ required: true })

web/projects/marketplace/src/components/registry.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { TuiIcon, TuiTitle } from '@taiga-ui/core'
-import { StoreIconComponentModule } from './store-icon/store-icon.component.module'
+import { StoreIconComponent } from './store-icon.component'
 
 @Component({
   selector: '[registry]',
@@ -17,7 +17,7 @@ import { StoreIconComponentModule } from './store-icon/store-icon.component.modu
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [StoreIconComponentModule, TuiIcon, TuiTitle],
+  imports: [StoreIconComponent, TuiIcon, TuiTitle],
 })
 export class MarketplaceRegistryComponent {
   @Input()

web/projects/marketplace/src/components/store-icon.component.ts

@@ -21,7 +21,6 @@ import { knownRegistries, sameUrl } from '@start9labs/shared'
   `,
   styles: ':host { overflow: hidden; }',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class StoreIconComponent {
   @Input()

web/projects/marketplace/src/components/store-icon/store-icon.component.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { StoreIconComponent } from './store-icon.component'
-
-@NgModule({
-  declarations: [StoreIconComponent],
-  imports: [CommonModule],
-  exports: [StoreIconComponent],
-})
-export class StoreIconComponentModule {}

web/projects/marketplace/src/pages/list/categories/categories.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -5,7 +6,11 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { LocalizePipe } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
+import { TuiAppearance, TuiIcon } from '@taiga-ui/core'
+import { TuiSkeleton } from '@taiga-ui/kit'
 
 const ICONS: Record<string, string> = {
   all: '@tui.layout-grid',
@@ -26,8 +31,15 @@ const ICONS: Record<string, string> = {
   selector: 'marketplace-categories',
   templateUrl: 'categories.component.html',
   styleUrls: ['categories.component.scss'],
+  imports: [
+    RouterModule,
+    CommonModule,
+    TuiAppearance,
+    TuiIcon,
+    TuiSkeleton,
+    LocalizePipe,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class CategoriesComponent {
   @Input()

web/projects/marketplace/src/pages/list/categories/categories.module.ts

@@ -1,15 +0,0 @@
-import { TuiIcon, TuiAppearance } from '@taiga-ui/core'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { TuiSkeleton } from '@taiga-ui/kit'
-import { LocalizePipe } from '@start9labs/shared'
-
-import { CategoriesComponent } from './categories.component'
-import { RouterModule } from '@angular/router'
-
-@NgModule({
-  imports: [RouterModule, CommonModule, TuiAppearance, TuiIcon, TuiSkeleton, LocalizePipe],
-  declarations: [CategoriesComponent],
-  exports: [CategoriesComponent],
-})
-export class CategoriesModule {}

web/projects/marketplace/src/pages/list/item/item.component.ts

@@ -1,12 +1,15 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { LocalizePipe, TickerComponent } from '@start9labs/shared'
 import { MarketplacePkg } from '../../../types'
 
 @Component({
   selector: 'marketplace-item',
   templateUrl: 'item.component.html',
   styleUrls: ['item.component.scss'],
+  imports: [CommonModule, RouterModule, TickerComponent, LocalizePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class ItemComponent {
   @Input({ required: true })

web/projects/marketplace/src/pages/list/item/item.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { RouterModule } from '@angular/router'
-import { LocalizePipe, SharedPipesModule, TickerComponent } from '@start9labs/shared'
-import { ItemComponent } from './item.component'
-
-@NgModule({
-  declarations: [ItemComponent],
-  exports: [ItemComponent],
-  imports: [CommonModule, RouterModule, SharedPipesModule, TickerComponent, LocalizePipe],
-})
-export class ItemModule {}

web/projects/marketplace/src/pages/list/search/search.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -5,13 +6,15 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { TuiIcon } from '@taiga-ui/core'
 
 @Component({
   selector: 'marketplace-search',
   templateUrl: 'search.component.html',
   styleUrls: ['search.component.scss'],
+  imports: [FormsModule, CommonModule, TuiIcon],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class SearchComponent {
   @Input()

web/projects/marketplace/src/pages/list/search/search.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { FormsModule } from '@angular/forms'
-import { TuiIcon } from '@taiga-ui/core'
-import { SearchComponent } from './search.component'
-
-@NgModule({
-  imports: [FormsModule, CommonModule, TuiIcon],
-  declarations: [SearchComponent],
-  exports: [SearchComponent],
-})
-export class SearchModule {}

web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts

@@ -1,7 +1,12 @@
 import { KeyValue } from '@angular/common'
-import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+} from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { ExverPipesModule, i18nPipe, i18nService } from '@start9labs/shared'
+import { i18nPipe, i18nService } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
 import { TuiAvatar, TuiLineClamp } from '@taiga-ui/kit'
 import { MarketplacePkgBase } from '../../../types'
@@ -20,9 +25,7 @@ import { MarketplacePkgBase } from '../../../types'
         <tui-line-clamp [linesLimit]="2" [content]="titleContent" />
         <ng-template #titleContent>
           <div class="title">
-            <span>
+            <span>{{ getTitle(dep.key) }}</span>
-              {{ getTitle(dep.key) }}
-            </span>
             <p>
               @if (dep.value.optional) {
                 <span>({{ 'Optional' | i18n }})</span>
@@ -37,9 +40,7 @@ import { MarketplacePkgBase } from '../../../types'
           [content]="descContent"
           class="description"
         />
-        <ng-template #descContent>
+        <ng-template #descContent>{{ dep.value.description }}</ng-template>
-          {{ dep.value.description }}
-        </ng-template>
       </div>
     </div>
   `,
@@ -94,7 +95,7 @@ import { MarketplacePkgBase } from '../../../types'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterModule, TuiAvatar, ExverPipesModule, TuiLineClamp, i18nPipe],
+  imports: [RouterModule, TuiAvatar, TuiLineClamp, i18nPipe],
 })
 export class MarketplaceDepItemComponent {
   private readonly i18nService = inject(i18nService)

web/projects/marketplace/src/pages/show/flavors.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { i18nPipe, SharedPipesModule } from '@start9labs/shared'
+import { i18nPipe, TrustUrlPipe } from '@start9labs/shared'
 import { TuiTitle } from '@taiga-ui/core'
 import { TuiAvatar } from '@taiga-ui/kit'
 import { TuiCell } from '@taiga-ui/layout'
@@ -47,14 +47,7 @@ import { MarketplacePkg } from '../../types'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
+  imports: [RouterLink, TuiCell, TuiTitle, TrustUrlPipe, TuiAvatar, i18nPipe],
-    RouterLink,
-    TuiCell,
-    TuiTitle,
-    SharedPipesModule,
-    TuiAvatar,
-    i18nPipe,
-  ],
 })
 export class MarketplaceFlavorsComponent {
   @Input()

web/projects/marketplace/src/pages/show/hero.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { SharedPipesModule, TickerComponent } from '@start9labs/shared'
+import { TickerComponent } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
 
 @Component({
@@ -118,7 +118,7 @@ import { T } from '@start9labs/start-sdk'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SharedPipesModule, TickerComponent],
+  imports: [TickerComponent],
 })
 export class MarketplacePackageHeroComponent {
   @Input({ required: true })

web/projects/marketplace/src/pages/show/versions.component.ts

@@ -7,7 +7,7 @@ import {
   TemplateRef,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { DialogService, i18nPipe, SharedPipesModule } from '@start9labs/shared'
+import { DialogService, i18nPipe } from '@start9labs/shared'
 import { TuiButton, TuiDialogContext } from '@taiga-ui/core'
 import { TuiRadioList } from '@taiga-ui/kit'
 import { filter } from 'rxjs'
@@ -76,7 +76,6 @@ import { MarketplaceItemComponent } from './item.component'
   imports: [
     MarketplaceItemComponent,
     TuiButton,
-    SharedPipesModule,
     FormsModule,
     TuiRadioList,
     i18nPipe,

web/projects/marketplace/src/pipes/filter-packages.pipe.ts

@@ -4,7 +4,6 @@ import Fuse from 'fuse.js'
 
 @Pipe({
   name: 'filterPackages',
-  standalone: false,
 })
 export class FilterPackagesPipe implements PipeTransform {
   transform(
@@ -79,9 +78,3 @@ export class FilterPackagesPipe implements PipeTransform {
       .map(a => ({ ...a }))
   }
 }
-
-@NgModule({
-  declarations: [FilterPackagesPipe],
-  exports: [FilterPackagesPipe],
-})
-export class FilterPackagesPipeModule {}

web/projects/marketplace/src/public-api.ts

@@ -3,11 +3,8 @@
  */
 
 export * from './pages/list/categories/categories.component'
-export * from './pages/list/categories/categories.module'
 export * from './pages/list/item/item.component'
-export * from './pages/list/item/item.module'
 export * from './pages/list/search/search.component'
-export * from './pages/list/search/search.module'
 export * from './pages/show/link.component'
 export * from './pages/show/item.component'
 export * from './pages/show/links.component'
@@ -22,10 +19,7 @@ export * from './pages/show/release-notes.component'
 
 export * from './pipes/filter-packages.pipe'
 
-export * from './components/store-icon/store-icon.component'
+export * from './components/store-icon.component'
-export * from './components/store-icon/store-icon.component.module'
-export * from './components/store-icon/store-icon.component'
-export * from './components/menu/menu.component.module'
 export * from './components/menu/menu.component'
 export * from './components/registry.component'
 

web/projects/setup-wizard/src/app/app.component.ts

@@ -1,15 +1,17 @@
-import { Component, inject, DOCUMENT } from '@angular/core'
+import { Component, DOCUMENT, inject, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { Router, RouterOutlet } from '@angular/router'
 import { ErrorService } from '@start9labs/shared'
+import { TuiRoot } from '@taiga-ui/core'
+
 import { ApiService } from './services/api.service'
 import { StateService } from './services/state.service'
 
 @Component({
   selector: 'app-root',
   template: '<tui-root tuiTheme="dark"><router-outlet /></tui-root>',
-  standalone: false,
+  imports: [TuiRoot, RouterOutlet],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   private readonly api = inject(ApiService)
   private readonly errorService = inject(ErrorService)
   private readonly router = inject(Router)

web/projects/setup-wizard/src/app/app.config.ts

@@ -3,9 +3,20 @@ import {
   withFetch,
   withInterceptorsFromDi,
 } from '@angular/common/http'
-import { inject, NgModule, provideAppInitializer } from '@angular/core'
+import {
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+  ApplicationConfig,
-import { PreloadAllModules, RouterModule } from '@angular/router'
+  inject,
+  provideAppInitializer,
+  provideZoneChangeDetection,
+  signal,
+} from '@angular/core'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import {
+  PreloadAllModules,
+  provideRouter,
+  withDisabledInitialNavigation,
+  withPreloading,
+} from '@angular/router'
 import { WA_LOCATION } from '@ng-web-apis/common'
 import initArgon from '@start9labs/argon2'
 import {
@@ -15,13 +26,16 @@ import {
   VERSION,
   WorkspaceConfig,
 } from '@start9labs/shared'
-import { tuiButtonOptionsProvider, TuiRoot } from '@taiga-ui/core'
+import {
-import { NG_EVENT_PLUGINS } from '@taiga-ui/event-plugins'
+  tuiButtonOptionsProvider,
+  tuiTextfieldOptionsProvider,
+} from '@taiga-ui/core'
+import { provideEventPlugins } from '@taiga-ui/event-plugins'
+
+import { ROUTES } from './app.routes'
 import { ApiService } from './services/api.service'
 import { LiveApiService } from './services/live-api.service'
 import { MockApiService } from './services/mock-api.service'
-import { AppComponent } from './app.component'
-import { ROUTES } from './app.routes'
 
 const {
   useMocks,
@@ -30,18 +44,16 @@ const {
 
 const version = require('../../../../package.json').version
 
-@NgModule({
+export const APP_CONFIG: ApplicationConfig = {
-  declarations: [AppComponent],
-  imports: [
-    BrowserAnimationsModule,
-    RouterModule.forRoot(ROUTES, {
-      preloadingStrategy: PreloadAllModules,
-      initialNavigation: 'disabled',
-    }),
-    TuiRoot,
-  ],
   providers: [
-    NG_EVENT_PLUGINS,
+    provideZoneChangeDetection(),
+    provideAnimations(),
+    provideEventPlugins(),
+    provideRouter(
+      ROUTES,
+      withDisabledInitialNavigation(),
+      withPreloading(PreloadAllModules),
+    ),
     I18N_PROVIDERS,
     provideSetupLogsService(ApiService),
     tuiButtonOptionsProvider({ size: 'm' }),
@@ -64,7 +76,6 @@ const version = require('../../../../package.json').version
 
       initArgon({ module_or_path })
     }),
+    tuiTextfieldOptionsProvider({ cleaner: signal(false) }),
   ],
-  bootstrap: [AppComponent],
+}
-})
-export class AppModule {}

web/projects/setup-wizard/src/app/components/preserve-overwrite.dialog.ts

@@ -5,7 +5,6 @@ import { TuiDialogContext } from '@taiga-ui/core'
 import { injectContext } from '@taiga-ui/polymorpheus'
 
 @Component({
-  standalone: true,
   imports: [TuiButton, i18nPipe],
   template: `
     <p>{{ 'This drive contains existing StartOS data.' | i18n }}</p>

web/projects/setup-wizard/src/app/components/remove-media.dialog.ts

@@ -4,7 +4,6 @@ import { TuiButton, TuiDialogContext } from '@taiga-ui/core'
 import { injectContext } from '@taiga-ui/polymorpheus'
 
 @Component({
-  standalone: true,
   imports: [TuiButton, i18nPipe],
   template: `
     <div class="animation-container">

web/projects/setup-wizard/src/app/components/select-network-backup.dialog.ts

@@ -11,7 +11,6 @@ interface Data {
 }
 
 @Component({
-  standalone: true,
   imports: [FormsModule, TuiTextfield, TuiSelect, TuiDataListWrapper, i18nPipe],
   template: `
     <p>{{ 'Multiple backups found. Select which one to restore.' | i18n }}</p>

web/projects/setup-wizard/src/app/components/unlock-password.dialog.ts

@@ -11,7 +11,6 @@ import { TuiPassword } from '@taiga-ui/kit'
 import { injectContext } from '@taiga-ui/polymorpheus'
 
 @Component({
-  standalone: true,
   imports: [
     FormsModule,
     TuiButton,

web/projects/setup-wizard/src/main.ts

@@ -1,13 +1,11 @@
 import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { bootstrapApplication } from '@angular/platform-browser'
-
+import { AppComponent } from 'src/app/app.component'
-import { AppModule } from './app/app.module'
+import { APP_CONFIG } from 'src/app/app.config'
-import { environment } from './environments/environment'
+import { environment } from 'src/environments/environment'
 
 if (environment.production) {
   enableProdMode()
 }
 
-platformBrowserDynamic()
+bootstrapApplication(AppComponent, APP_CONFIG).catch(console.error)
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err))

web/projects/shared/src/pipes/convert-bytes.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+// converts bytes to gigabytes
+@Pipe({
+  name: 'convertBytes',
+})
+export class ConvertBytesPipe implements PipeTransform {
+  transform(bytes: number): string {
+    return convertBytes(bytes)
+  }
+}
+
+export function convertBytes(bytes: number): string {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+}
+
+const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']

web/projects/shared/src/pipes/empty.pipe.ts

@@ -1,13 +1,11 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { isEmptyObject } from '../../util/misc.util'
+import { isEmptyObject } from '../util/misc.util'
 
 @Pipe({
   name: 'empty',
-  standalone: false,
 })
 export class EmptyPipe implements PipeTransform {
   transform(val: object | [] = {}): boolean {
-    if (Array.isArray(val)) return !val.length
+    return Array.isArray(val) ? !val.length : isEmptyObject(val)
-    return isEmptyObject(val)
   }
 }

web/projects/shared/src/pipes/exver-compares.pipe.ts

@@ -1,28 +1,11 @@
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-import { Exver } from '../../services/exver.service'
+import { Exver } from '../services/exver.service'
-
-@Pipe({
-  name: 'satisfiesExver',
-  standalone: false,
-})
-export class ExverSatisfiesPipe implements PipeTransform {
-  constructor(private readonly exver: Exver) {}
-
-  transform(versionUnderTest?: string, range?: string): boolean {
-    return (
-      !!versionUnderTest &&
-      !!range &&
-      this.exver.satisfies(versionUnderTest, range)
-    )
-  }
-}
 
 @Pipe({
   name: 'compareExver',
-  standalone: false,
 })
 export class ExverComparesPipe implements PipeTransform {
-  constructor(private readonly exver: Exver) {}
+  private readonly exver = inject(Exver)
 
   transform(first: string, second: string): SemverResult {
     try {

web/projects/shared/src/pipes/exver/exver.module.ts

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core'
-import { ExverComparesPipe, ExverSatisfiesPipe } from './exver.pipe'
-
-@NgModule({
-  declarations: [ExverComparesPipe, ExverSatisfiesPipe],
-  exports: [ExverComparesPipe, ExverSatisfiesPipe],
-})
-export class ExverPipesModule {}

web/projects/shared/src/pipes/shared/includes.pipe.ts

@@ -1,11 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-
-@Pipe({
-  name: 'includes',
-  standalone: false,
-})
-export class IncludesPipe implements PipeTransform {
-  transform<T>(list: T[], val: T): boolean {
-    return list.includes(val)
-  }
-}

web/projects/shared/src/pipes/shared/shared.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core'
-import { IncludesPipe } from './includes.pipe'
-import { EmptyPipe } from './empty.pipe'
-import { TrustUrlPipe } from './trust.pipe'
-
-@NgModule({
-  declarations: [IncludesPipe, EmptyPipe, TrustUrlPipe],
-  exports: [IncludesPipe, EmptyPipe, TrustUrlPipe],
-})
-export class SharedPipesModule {}

web/projects/shared/src/pipes/shared/sort.pipe.ts

@@ -1,35 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-
-@Pipe({
-  name: 'sort',
-  standalone: false,
-})
-export class SortPipe implements PipeTransform {
-  transform(
-    value: any[],
-    column: string = '',
-    direction: string = 'asc',
-  ): any[] {
-    // If the value is not an array or is empty, return the original value
-    if (!Array.isArray(value) || value.length === 0) {
-      return value
-    }
-
-    // Clone the array to avoid modifying the original value
-    const sortedValue = [...value]
-
-    // Define the sorting function based on the column and direction parameters
-    const sortingFn = (a: any, b: any): number => {
-      if (a[column] < b[column]) {
-        return direction === 'asc' ? -1 : 1
-      } else if (a[column] > b[column]) {
-        return direction === 'asc' ? 1 : -1
-      } else {
-        return 0
-      }
-    }
-
-    // Sort the array and return the result
-    return sortedValue.sort(sortingFn)
-  }
-}

web/projects/shared/src/pipes/trust.pipe.ts

@@ -1,12 +1,11 @@
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 
 @Pipe({
   name: 'trustUrl',
-  standalone: false,
 })
 export class TrustUrlPipe implements PipeTransform {
-  constructor(private readonly sanitizer: DomSanitizer) {}
+  private readonly sanitizer = inject(DomSanitizer)
 
   transform(base64Icon: string): SafeResourceUrl {
     return this.sanitizer.bypassSecurityTrustResourceUrl(base64Icon)

web/projects/shared/src/pipes/unit-conversion/unit-conversion.module.ts

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core'
-import { ConvertBytesPipe, DurationToSecondsPipe } from './unit-conversion.pipe'
-
-@NgModule({
-  declarations: [ConvertBytesPipe, DurationToSecondsPipe],
-  exports: [ConvertBytesPipe, DurationToSecondsPipe],
-})
-export class UnitConversionPipesModule {}

web/projects/shared/src/pipes/unit-conversion/unit-conversion.pipe.ts

@@ -1,49 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-
-// converts bytes to gigabytes
-@Pipe({
-  name: 'convertBytes',
-  standalone: false,
-})
-export class ConvertBytesPipe implements PipeTransform {
-  transform(bytes: number): string {
-    return convertBytes(bytes)
-  }
-}
-
-export function convertBytes(bytes: number): string {
-  if (bytes === 0) return '0 Bytes'
-
-  const k = 1024
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
-}
-
-@Pipe({
-  name: 'durationToSeconds',
-  standalone: false,
-})
-export class DurationToSecondsPipe implements PipeTransform {
-  transform(duration?: string | null): number {
-    if (!duration) return 0
-
-    const regex = /^([0-9]*(\.[0-9]+)?)(ns|µs|ms|s|m|d)$/
-    const [, num, , unit] = duration.match(regex) || []
-    const multiplier = (unit && unitsToSeconds[unit]) || NaN
-
-    return unit ? Number(num) * multiplier : NaN
-  }
-}
-
-const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-
-const unitsToSeconds: Record<string, number> = {
-  ns: 1e-9,
-  µs: 1e-6,
-  ms: 0.001,
-  s: 1,
-  m: 60,
-  h: 3600,
-  d: 86400,
-}

web/projects/shared/src/public-api.ts

@@ -20,14 +20,10 @@ export * from './i18n/i18n.providers'
 export * from './i18n/i18n.service'
 export * from './i18n/localize.pipe'
 
-export * from './pipes/exver/exver.module'
+export * from './pipes/exver-compares.pipe'
-export * from './pipes/exver/exver.pipe'
+export * from './pipes/empty.pipe'
-export * from './pipes/shared/shared.module'
+export * from './pipes/trust.pipe'
-export * from './pipes/shared/empty.pipe'
+export * from './pipes/convert-bytes.pipe'
-export * from './pipes/shared/includes.pipe'
-export * from './pipes/shared/trust.pipe'
-export * from './pipes/unit-conversion/unit-conversion.module'
-export * from './pipes/unit-conversion/unit-conversion.pipe'
 export * from './pipes/markdown.pipe'
 
 export * from './services/copy.service'

web/projects/ui/src/app/app.component.ts

@@ -1,14 +1,18 @@
 import { Component, inject } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { RouterOutlet } from '@angular/router'
 import { i18nService } from '@start9labs/shared'
+import { TuiRoot } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
 import { merge } from 'rxjs'
+import { ToastContainerComponent } from 'src/app/components/toast-container.component'
 import { PatchDataService } from './services/patch-data.service'
 import { DataModel } from './services/patch-db/data-model'
 import { PatchMonitorService } from './services/patch-monitor.service'
 
 @Component({
   selector: 'app-root',
+  imports: [TuiRoot, RouterOutlet, ToastContainerComponent],
   template: `
     <tui-root tuiTheme="dark">
       <router-outlet />
@@ -26,7 +30,6 @@ import { PatchMonitorService } from './services/patch-monitor.service'
       font-family: 'Proxima Nova', system-ui;
     }
   `,
-  standalone: false,
 })
 export class AppComponent {
   private readonly i18n = inject(i18nService)

web/projects/ui/src/app/app.config.ts

@@ -0,0 +1,199 @@
+import {
+  provideHttpClient,
+  withFetch,
+  withInterceptorsFromDi,
+} from '@angular/common/http'
+import {
+  ApplicationConfig,
+  inject,
+  provideAppInitializer,
+  provideZoneChangeDetection,
+} from '@angular/core'
+import { UntypedFormBuilder } from '@angular/forms'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import {
+  ActivationStart,
+  PreloadAllModules,
+  provideRouter,
+  Router,
+  withComponentInputBinding,
+  withDisabledInitialNavigation,
+  withInMemoryScrolling,
+  withPreloading,
+  withRouterConfig,
+} from '@angular/router'
+import { provideServiceWorker } from '@angular/service-worker'
+import { WA_LOCATION } from '@ng-web-apis/common'
+import initArgon from '@start9labs/argon2'
+import {
+  AbstractCategoryService,
+  FilterPackagesPipe,
+} from '@start9labs/marketplace'
+import {
+  I18N_PROVIDERS,
+  I18N_STORAGE,
+  i18nService,
+  Languages,
+  RELATIVE_URL,
+  VERSION,
+  WorkspaceConfig,
+} from '@start9labs/shared'
+import { tuiObfuscateOptionsProvider } from '@taiga-ui/cdk'
+import {
+  TUI_DATE_FORMAT,
+  TUI_DIALOGS_CLOSE,
+  TUI_MEDIA,
+  tuiAlertOptionsProvider,
+  tuiButtonOptionsProvider,
+  tuiDropdownOptionsProvider,
+  tuiNumberFormatProvider,
+} from '@taiga-ui/core'
+import { provideEventPlugins } from '@taiga-ui/event-plugins'
+import {
+  TUI_DATE_TIME_VALUE_TRANSFORMER,
+  TUI_DATE_VALUE_TRANSFORMER,
+} from '@taiga-ui/kit'
+import { PatchDB } from 'patch-db-client'
+import { filter, identity, merge, of, pairwise } from 'rxjs'
+import { FilterUpdatesPipe } from 'src/app/routes/portal/routes/updates/filter-updates.pipe'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { LiveApiService } from 'src/app/services/api/embassy-live-api.service'
+import { MockApiService } from 'src/app/services/api/embassy-mock-api.service'
+import { AuthService } from 'src/app/services/auth.service'
+import { CategoryService } from 'src/app/services/category.service'
+import { ClientStorageService } from 'src/app/services/client-storage.service'
+import { ConfigService } from 'src/app/services/config.service'
+import { DateTransformerService } from 'src/app/services/date-transformer.service'
+import { DatetimeTransformerService } from 'src/app/services/datetime-transformer.service'
+import {
+  PATCH_CACHE,
+  PatchDbSource,
+} from 'src/app/services/patch-db/patch-db-source'
+import { StateService } from 'src/app/services/state.service'
+import { StorageService } from 'src/app/services/storage.service'
+import { environment } from 'src/environments/environment'
+
+import { ROUTES } from './app.routes'
+
+const {
+  useMocks,
+  ui: { api },
+} = require('../../../../config.json') as WorkspaceConfig
+
+export const APP_CONFIG: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection(),
+    provideAnimations(),
+    provideEventPlugins(),
+    provideHttpClient(withInterceptorsFromDi(), withFetch()),
+    provideRouter(
+      ROUTES,
+      withDisabledInitialNavigation(),
+      withComponentInputBinding(),
+      withPreloading(PreloadAllModules),
+      withInMemoryScrolling({ scrollPositionRestoration: 'enabled' }),
+      withRouterConfig({ paramsInheritanceStrategy: 'always' }),
+    ),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: environment.useServiceWorker,
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000',
+    }),
+    I18N_PROVIDERS,
+    FilterPackagesPipe,
+    FilterUpdatesPipe,
+    UntypedFormBuilder,
+    tuiNumberFormatProvider({ decimalSeparator: '.', thousandSeparator: '' }),
+    tuiButtonOptionsProvider({ size: 'm' }),
+    tuiDropdownOptionsProvider({ appearance: 'start-os' }),
+    tuiAlertOptionsProvider({
+      autoClose: appearance => (appearance === 'negative' ? 0 : 3000),
+    }),
+    {
+      provide: TUI_DATE_FORMAT,
+      useValue: of({
+        mode: 'MDY',
+        separator: '/',
+      }),
+    },
+    {
+      provide: TUI_DATE_VALUE_TRANSFORMER,
+      useClass: DateTransformerService,
+    },
+    {
+      provide: TUI_DATE_TIME_VALUE_TRANSFORMER,
+      useClass: DatetimeTransformerService,
+    },
+    {
+      provide: ApiService,
+      useClass: useMocks ? MockApiService : LiveApiService,
+    },
+    {
+      provide: PatchDB,
+      deps: [PatchDbSource, PATCH_CACHE],
+      useClass: PatchDB,
+    },
+    provideAppInitializer(() => {
+      const i18n = inject(i18nService)
+      const origin = inject(WA_LOCATION).origin
+      const module_or_path = new URL('/assets/argon2_bg.wasm', origin)
+
+      initArgon({ module_or_path })
+      inject(StorageService).migrate036()
+      inject(AuthService).init()
+      inject(ClientStorageService).init()
+      inject(Router).initialNavigation()
+      i18n.setLanguage(i18n.language || 'english')
+    }),
+    {
+      provide: RELATIVE_URL,
+      useValue: `/${api.url}/${api.version}`,
+    },
+    {
+      provide: AbstractCategoryService,
+      useClass: CategoryService,
+    },
+    {
+      provide: TUI_DIALOGS_CLOSE,
+      useFactory: () =>
+        merge(
+          inject(Router).events.pipe(filter(e => e instanceof ActivationStart)),
+          inject(StateService).pipe(
+            pairwise(),
+            filter(
+              ([prev, curr]) =>
+                prev === 'running' &&
+                (curr === 'error' || curr === 'initializing'),
+            ),
+          ),
+        ),
+    },
+    {
+      provide: I18N_STORAGE,
+      useFactory: () => {
+        const api = inject(ApiService)
+
+        return (language: Languages) => api.setLanguage({ language })
+      },
+    },
+    {
+      provide: VERSION,
+      useFactory: () => inject(ConfigService).version,
+    },
+    tuiObfuscateOptionsProvider({
+      recipes: {
+        mask: ({ length }) => '•'.repeat(length),
+        none: identity,
+      },
+    }),
+    {
+      provide: TUI_MEDIA,
+      useValue: {
+        mobile: 1000,
+        desktopSmall: 1280,
+        desktopLarge: Infinity,
+      },
+    },
+  ],
+}

web/projects/ui/src/app/app.module.ts

@@ -1,36 +0,0 @@
-import {
-  provideHttpClient,
-  withFetch,
-  withInterceptorsFromDi,
-} from '@angular/common/http'
-import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
-import { ServiceWorkerModule } from '@angular/service-worker'
-import { TuiRoot } from '@taiga-ui/core'
-import { ToastContainerComponent } from 'src/app/components/toast-container.component'
-import { environment } from '../environments/environment'
-import { AppComponent } from './app.component'
-import { APP_PROVIDERS } from './app.providers'
-import { RoutingModule } from './routing.module'
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    RoutingModule,
-    ToastContainerComponent,
-    TuiRoot,
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.useServiceWorker,
-      // Register the ServiceWorker as soon as the application is stable
-      // or after 30 seconds (whichever comes first).
-      registrationStrategy: 'registerWhenStable:30000',
-    }),
-  ],
-  providers: [
-    APP_PROVIDERS,
-    provideHttpClient(withInterceptorsFromDi(), withFetch()),
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}

web/projects/ui/src/app/app.providers.ts

@@ -1,157 +0,0 @@
-import { inject, provideAppInitializer } from '@angular/core'
-import { UntypedFormBuilder } from '@angular/forms'
-import { provideAnimations } from '@angular/platform-browser/animations'
-import { ActivationStart, Router } from '@angular/router'
-import { WA_LOCATION } from '@ng-web-apis/common'
-import initArgon from '@start9labs/argon2'
-import {
-  AbstractCategoryService,
-  FilterPackagesPipe,
-} from '@start9labs/marketplace'
-import {
-  I18N_PROVIDERS,
-  I18N_STORAGE,
-  i18nService,
-  Languages,
-  RELATIVE_URL,
-  VERSION,
-  WorkspaceConfig,
-} from '@start9labs/shared'
-import { tuiObfuscateOptionsProvider } from '@taiga-ui/cdk'
-import {
-  TUI_DATE_FORMAT,
-  TUI_DIALOGS_CLOSE,
-  TUI_MEDIA,
-  tuiAlertOptionsProvider,
-  tuiButtonOptionsProvider,
-  tuiDropdownOptionsProvider,
-  tuiNumberFormatProvider,
-} from '@taiga-ui/core'
-import { provideEventPlugins } from '@taiga-ui/event-plugins'
-import {
-  TUI_DATE_TIME_VALUE_TRANSFORMER,
-  TUI_DATE_VALUE_TRANSFORMER,
-} from '@taiga-ui/kit'
-import { PatchDB } from 'patch-db-client'
-import { filter, identity, merge, of, pairwise } from 'rxjs'
-import { ConfigService } from 'src/app/services/config.service'
-import {
-  PATCH_CACHE,
-  PatchDbSource,
-} from 'src/app/services/patch-db/patch-db-source'
-import { StateService } from 'src/app/services/state.service'
-import { FilterUpdatesPipe } from './routes/portal/routes/updates/filter-updates.pipe'
-import { ApiService } from './services/api/embassy-api.service'
-import { LiveApiService } from './services/api/embassy-live-api.service'
-import { MockApiService } from './services/api/embassy-mock-api.service'
-import { AuthService } from './services/auth.service'
-import { CategoryService } from './services/category.service'
-import { ClientStorageService } from './services/client-storage.service'
-import { DateTransformerService } from './services/date-transformer.service'
-import { DatetimeTransformerService } from './services/datetime-transformer.service'
-import { StorageService } from './services/storage.service'
-
-const {
-  useMocks,
-  ui: { api },
-} = require('../../../../config.json') as WorkspaceConfig
-
-export const APP_PROVIDERS = [
-  provideAnimations(),
-  provideEventPlugins(),
-  I18N_PROVIDERS,
-  FilterPackagesPipe,
-  FilterUpdatesPipe,
-  UntypedFormBuilder,
-  tuiNumberFormatProvider({ decimalSeparator: '.', thousandSeparator: '' }),
-  tuiButtonOptionsProvider({ size: 'm' }),
-  tuiDropdownOptionsProvider({ appearance: 'start-os' }),
-  tuiAlertOptionsProvider({
-    autoClose: appearance => (appearance === 'negative' ? 0 : 3000),
-  }),
-  {
-    provide: TUI_DATE_FORMAT,
-    useValue: of({
-      mode: 'MDY',
-      separator: '/',
-    }),
-  },
-  {
-    provide: TUI_DATE_VALUE_TRANSFORMER,
-    useClass: DateTransformerService,
-  },
-  {
-    provide: TUI_DATE_TIME_VALUE_TRANSFORMER,
-    useClass: DatetimeTransformerService,
-  },
-  {
-    provide: ApiService,
-    useClass: useMocks ? MockApiService : LiveApiService,
-  },
-  {
-    provide: PatchDB,
-    deps: [PatchDbSource, PATCH_CACHE],
-    useClass: PatchDB,
-  },
-  provideAppInitializer(() => {
-    const i18n = inject(i18nService)
-    const origin = inject(WA_LOCATION).origin
-    const module_or_path = new URL('/assets/argon2_bg.wasm', origin)
-
-    initArgon({ module_or_path })
-    inject(StorageService).migrate036()
-    inject(AuthService).init()
-    inject(ClientStorageService).init()
-    inject(Router).initialNavigation()
-    i18n.setLanguage(i18n.language || 'english')
-  }),
-  {
-    provide: RELATIVE_URL,
-    useValue: `/${api.url}/${api.version}`,
-  },
-  {
-    provide: AbstractCategoryService,
-    useClass: CategoryService,
-  },
-  {
-    provide: TUI_DIALOGS_CLOSE,
-    useFactory: () =>
-      merge(
-        inject(Router).events.pipe(filter(e => e instanceof ActivationStart)),
-        inject(StateService).pipe(
-          pairwise(),
-          filter(
-            ([prev, curr]) =>
-              prev === 'running' &&
-              (curr === 'error' || curr === 'initializing'),
-          ),
-        ),
-      ),
-  },
-  {
-    provide: I18N_STORAGE,
-    useFactory: () => {
-      const api = inject(ApiService)
-
-      return (language: Languages) => api.setLanguage({ language })
-    },
-  },
-  {
-    provide: VERSION,
-    useFactory: () => inject(ConfigService).version,
-  },
-  tuiObfuscateOptionsProvider({
-    recipes: {
-      mask: ({ length }) => '•'.repeat(length),
-      none: identity,
-    },
-  }),
-  {
-    provide: TUI_MEDIA,
-    useValue: {
-      mobile: 1000,
-      desktopSmall: 1280,
-      desktopLarge: Infinity,
-    },
-  },
-]

web/projects/ui/src/app/app.routes.ts

@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core'
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router'
+import { AuthGuard } from 'src/app/guards/auth.guard'
+import { UnauthGuard } from 'src/app/guards/unauth.guard'
 import { stateNot } from 'src/app/services/state.service'
-import { AuthGuard } from './guards/auth.guard'
-import { UnauthGuard } from './guards/unauth.guard'
 
-const routes: Routes = [
+export const ROUTES: Routes = [
   {
     path: 'diagnostic',
     canActivate: [stateNot(['initializing', 'running'])],
-    loadChildren: () => import('./routes/diagnostic/diagnostic.module'),
+    loadChildren: () => import('./routes/diagnostic/diagnostic.routes'),
   },
   {
     path: 'initializing',
@@ -18,8 +18,7 @@ const routes: Routes = [
   {
     path: 'login',
     canActivate: [UnauthGuard, stateNot(['error', 'initializing'])],
-    loadChildren: () =>
+    loadComponent: () => import('./routes/login/login.page'),
-      import('./routes/login/login.module').then(m => m.LoginPageModule),
   },
   {
     path: '',
@@ -32,17 +31,3 @@ const routes: Routes = [
     pathMatch: 'full',
   },
 ]
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {
-      scrollPositionRestoration: 'enabled',
-      paramsInheritanceStrategy: 'always',
-      preloadingStrategy: PreloadAllModules,
-      initialNavigation: 'disabled',
-      bindToComponentInputs: true,
-    }),
-  ],
-  exports: [RouterModule],
-})
-export class RoutingModule {}

web/projects/ui/src/app/routes/diagnostic/diagnostic.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-
-const ROUTES: Routes = [
-  {
-    path: '',
-    loadChildren: () =>
-      import('./home/home.module').then(m => m.HomePageModule),
-  },
-  {
-    path: 'logs',
-    loadComponent: () => import('./logs.component'),
-  },
-]
-
-@NgModule({
-  imports: [RouterModule.forChild(ROUTES)],
-})
-export default class DiagnosticModule {}

web/projects/ui/src/app/routes/diagnostic/diagnostic.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router'
+
+export default [
+  {
+    path: '',
+    loadComponent: () => import('./home/home.page'),
+  },
+  {
+    path: 'logs',
+    loadComponent: () => import('./logs.component'),
+  },
+] satisfies Routes

web/projects/ui/src/app/routes/diagnostic/home/home.module.ts

@@ -1,19 +0,0 @@
-import { TuiButton } from '@taiga-ui/core'
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { RouterModule, Routes } from '@angular/router'
-import { HomePage } from './home.page'
-import { i18nPipe } from '@start9labs/shared'
-
-const ROUTES: Routes = [
-  {
-    path: '',
-    component: HomePage,
-  },
-]
-
-@NgModule({
-  imports: [CommonModule, TuiButton, RouterModule.forChild(ROUTES), i18nPipe],
-  declarations: [HomePage],
-})
-export class HomePageModule {}

web/projects/ui/src/app/routes/diagnostic/home/home.page.ts

@@ -1,6 +1,14 @@
+import { CommonModule } from '@angular/common'
 import { Component, Inject } from '@angular/core'
+import { RouterLink } from '@angular/router'
 import { WA_WINDOW } from '@ng-web-apis/common'
-import { DialogService, i18nKey, LoadingService } from '@start9labs/shared'
+import {
+  DialogService,
+  i18nKey,
+  i18nPipe,
+  LoadingService,
+} from '@start9labs/shared'
+import { TuiButton } from '@taiga-ui/core'
 import { filter } from 'rxjs'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConfigService } from 'src/app/services/config.service'
@@ -9,9 +17,9 @@ import { ConfigService } from 'src/app/services/config.service'
   selector: 'diagnostic-home',
   templateUrl: 'home.component.html',
   styleUrls: ['home.page.scss'],
-  standalone: false,
+  imports: [CommonModule, TuiButton, i18nPipe, RouterLink],
 })
-export class HomePage {
+export default class HomePage {
   restarted = false
   error?: {
     code: number

web/projects/ui/src/app/routes/initializing/initializing.page.ts

@@ -20,9 +20,7 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { StateService } from 'src/app/services/state.service'
 
 @Component({
-  template: `
+  template: '<app-initializing [progress]="progress()" />',
-    <app-initializing [progress]="progress()" />
-  `,
   providers: [provideSetupLogsService(ApiService)],
   styles: ':host { height: 100%; }',
   imports: [InitializingComponent],

web/projects/ui/src/app/routes/login/login.module.ts

@@ -1,37 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { FormsModule } from '@angular/forms'
-import { RouterModule, Routes } from '@angular/router'
-import { i18nPipe } from '@start9labs/shared'
-import { TuiAutoFocus } from '@taiga-ui/cdk'
-import { TuiButton, TuiError, TuiIcon, TuiTextfield } from '@taiga-ui/core'
-import { TuiPassword } from '@taiga-ui/kit'
-import { TuiCardLarge } from '@taiga-ui/layout'
-import { CAWizardComponent } from './ca-wizard/ca-wizard.component'
-import { LoginPage } from './login.page'
-
-const routes: Routes = [
-  {
-    path: '',
-    component: LoginPage,
-  },
-]
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    CAWizardComponent,
-    TuiButton,
-    TuiCardLarge,
-    ...TuiTextfield,
-    TuiIcon,
-    TuiPassword,
-    TuiAutoFocus,
-    TuiError,
-    RouterModule.forChild(routes),
-    i18nPipe,
-  ],
-  declarations: [LoginPage],
-})
-export class LoginPageModule {}

web/projects/ui/src/app/routes/login/login.page.ts

@@ -1,19 +1,38 @@
-import { Router } from '@angular/router'
+import { CommonModule } from '@angular/common'
+import { Component, DestroyRef, DOCUMENT, inject, Inject } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
-import { Component, Inject, DestroyRef, inject, DOCUMENT } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
+import { i18nKey, i18nPipe, LoadingService } from '@start9labs/shared'
+import { TuiAutoFocus } from '@taiga-ui/cdk'
+import { TuiButton, TuiError, TuiIcon, TuiTextfield } from '@taiga-ui/core'
+import { TuiPassword } from '@taiga-ui/kit'
+import { TuiCardLarge } from '@taiga-ui/layout'
+import { CAWizardComponent } from 'src/app/routes/login/ca-wizard/ca-wizard.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { AuthService } from 'src/app/services/auth.service'
 import { ConfigService } from 'src/app/services/config.service'
-import { i18nKey, LoadingService } from '@start9labs/shared'
 
 @Component({
   selector: 'login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.page.scss'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    CAWizardComponent,
+    TuiButton,
+    TuiCardLarge,
+    TuiTextfield,
+    TuiIcon,
+    TuiPassword,
+    TuiAutoFocus,
+    TuiError,
+    i18nPipe,
+  ],
   providers: [],
-  standalone: false,
 })
-export class LoginPage {
+export default class LoginPage {
   password = ''
   error: i18nKey | null = null
 

web/projects/ui/src/app/routes/portal/components/header/header.component.ts

@@ -36,6 +36,7 @@ import { HeaderStatusComponent } from './status.component'
       height: 2.75rem;
       border-radius: var(--bumper);
       margin: var(--bumper);
+      clip-path: inset(0 round var(--bumper));
       overflow: hidden;
       filter: grayscale(1) brightness(0.75);
 
@@ -107,7 +108,8 @@ import { HeaderStatusComponent } from './status.component'
 
       &:has([data-status='success']) {
         --status: transparent;
-        filter: none;
+        // "none" breaks border radius in Firefox
+        filter: grayscale(0.001);
       }
     }
 

web/projects/ui/src/app/routes/portal/routes/backups/components/physical.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { UnitConversionPipesModule } from '@start9labs/shared'
+import { ConvertBytesPipe } from '@start9labs/shared'
 import { TuiButton } from '@taiga-ui/core'
 import { TuiSkeleton } from '@taiga-ui/kit'
 import { UnknownDisk } from 'src/app/services/api/api.types'
@@ -109,7 +109,7 @@ import { UnknownDisk } from 'src/app/services/api/api.types'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButton, UnitConversionPipesModule, TuiSkeleton],
+  imports: [TuiButton, ConvertBytesPipe, TuiSkeleton],
 })
 export class BackupsPhysicalComponent {
   @Input()

web/projects/ui/src/app/routes/portal/routes/marketplace/components/controls.component.ts

@@ -12,7 +12,7 @@ import { MarketplacePkg } from '@start9labs/marketplace'
 import {
   ErrorService,
   Exver,
-  ExverPipesModule,
+  ExverComparesPipe,
   i18nPipe,
   i18nService,
   LoadingService,
@@ -107,7 +107,7 @@ type KEYS = 'id' | 'version' | 'alerts' | 'flavor'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
-    ExverPipesModule,
+    ExverComparesPipe,
     TuiButton,
     ToManifestPipe,
     i18nPipe,
@@ -150,7 +150,11 @@ export class MarketplaceControlsComponent {
     const originalUrl = localPkg?.registry || null
 
     if (!localPkg) {
-      if (await this.alerts.alertInstall(this.i18n.localize(this.pkg().alerts.install || ''))) {
+      if (
+        await this.alerts.alertInstall(
+          this.i18n.localize(this.pkg().alerts.install || ''),
+        )
+      ) {
         this.installOrUpload(currentUrl)
       }
       return

web/projects/ui/src/app/routes/portal/routes/marketplace/components/menu.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { MenuModule } from '@start9labs/marketplace'
+import { MenuComponent } from '@start9labs/marketplace'
 import { TuiIcon, TuiButton, TuiAppearance } from '@taiga-ui/core'
 import { MARKETPLACE_REGISTRY } from '../modals/registry.component'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
@@ -41,7 +41,7 @@ import { DialogService, i18nPipe } from '@start9labs/shared'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
-    MenuModule,
+    MenuComponent,
     TuiButton,
     TuiIcon,
     TuiAppearance,

web/projects/ui/src/app/routes/portal/routes/marketplace/components/tile.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -8,7 +7,7 @@ import {
 } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { ActivatedRoute, Router } from '@angular/router'
-import { ItemModule, MarketplacePkg } from '@start9labs/marketplace'
+import { ItemComponent, MarketplacePkg } from '@start9labs/marketplace'
 import { TuiAutoFocus } from '@taiga-ui/cdk'
 import { TuiButton, TuiDropdownService, TuiPopup } from '@taiga-ui/core'
 import { TuiDrawer } from '@taiga-ui/kit'
@@ -78,8 +77,7 @@ import { MarketplaceSidebarService } from '../services/sidebar.service'
     },
   ],
   imports: [
-    CommonModule,
+    ItemComponent,
-    ItemModule,
     TuiAutoFocus,
     TuiButton,
     TuiPopup,

web/projects/ui/src/app/routes/portal/routes/marketplace/marketplace.component.ts

@@ -5,7 +5,6 @@ import { ActivatedRoute, Router } from '@angular/router'
 import {
   AbstractCategoryService,
   FilterPackagesPipe,
-  FilterPackagesPipeModule,
 } from '@start9labs/marketplace'
 import { i18nPipe } from '@start9labs/shared'
 import { TuiScrollbar } from '@taiga-ui/core'
@@ -153,7 +152,7 @@ import { ConfigService } from 'src/app/services/config.service'
     MarketplaceMenuComponent,
     MarketplaceNotificationComponent,
     TuiScrollbar,
-    FilterPackagesPipeModule,
+    FilterPackagesPipe,
     TitleDirective,
     i18nPipe,
   ],

web/projects/ui/src/app/routes/portal/routes/marketplace/modals/preview.component.ts

@@ -15,12 +15,7 @@ import {
   MarketplaceReleaseNotesComponent,
   MarketplaceVersionsComponent,
 } from '@start9labs/marketplace'
-import {
+import { DialogService, EmptyPipe, Exver, MARKDOWN } from '@start9labs/shared'
-  DialogService,
-  Exver,
-  MARKDOWN,
-  SharedPipesModule,
-} from '@start9labs/shared'
 import { TuiLoader } from '@taiga-ui/core'
 import {
   BehaviorSubject,
@@ -115,7 +110,7 @@ import { MarketplaceControlsComponent } from '../components/controls.component'
     CommonModule,
     MarketplacePackageHeroComponent,
     MarketplaceDependenciesComponent,
-    SharedPipesModule,
+    EmptyPipe,
     TuiLoader,
     MarketplaceLinksComponent,
     MarketplaceFlavorsComponent,

web/projects/ui/src/app/routes/portal/routes/marketplace/modals/registry.component.ts

@@ -1,10 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { Router } from '@angular/router'
-import {
+import { MarketplaceRegistryComponent } from '@start9labs/marketplace'
-  MarketplaceRegistryComponent,
-  StoreIconComponentModule,
-} from '@start9labs/marketplace'
 import {
   DialogService,
   ErrorService,
@@ -14,6 +11,7 @@ import {
   sameUrl,
   toUrl,
 } from '@start9labs/shared'
+import { IST, utils } from '@start9labs/start-sdk'
 import { TuiButton, TuiDialogContext, TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { TuiCell } from '@taiga-ui/layout'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
@@ -24,7 +22,6 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
-import { IST, utils } from '@start9labs/start-sdk'
 import { StorageService } from 'src/app/services/storage.service'
 
 @Component({
@@ -80,7 +77,6 @@ import { StorageService } from 'src/app/services/storage.service'
     TuiTitle,
     TuiButton,
     MarketplaceRegistryComponent,
-    StoreIconComponentModule,
     i18nPipe,
   ],
 })

web/projects/ui/src/app/routes/portal/routes/sideload/package.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import { Component, inject, input } from '@angular/core'
 import {
   MarketplaceAboutComponent,
@@ -7,7 +6,7 @@ import {
   MarketplacePackageHeroComponent,
   MarketplaceReleaseNotesComponent,
 } from '@start9labs/marketplace'
-import { DialogService, MARKDOWN, SharedPipesModule } from '@start9labs/shared'
+import { DialogService, EmptyPipe, MARKDOWN } from '@start9labs/shared'
 import { of } from 'rxjs'
 import { MarketplaceControlsComponent } from '../marketplace/components/controls.component'
 import { MarketplacePkgSideload } from './sideload.utils'
@@ -70,8 +69,7 @@ import { MarketplacePkgSideload } from './sideload.utils'
     }
   `,
   imports: [
-    CommonModule,
+    EmptyPipe,
-    SharedPipesModule,
     MarketplaceAboutComponent,
     MarketplaceLinksComponent,
     MarketplacePackageHeroComponent,

web/projects/ui/src/app/routes/portal/routes/system/routes/backups/backups.component.ts

@@ -7,12 +7,7 @@ import {
 } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { ActivatedRoute, RouterLink } from '@angular/router'
-import {
+import { DialogService, DocsLinkDirective, i18nPipe } from '@start9labs/shared'
-  DialogService,
-  DocsLinkDirective,
-  i18nPipe,
-  UnitConversionPipesModule,
-} from '@start9labs/shared'
 import { TuiMapperPipe } from '@taiga-ui/cdk'
 import {
   TuiButton,
@@ -150,7 +145,6 @@ import { BACKUP_RESTORE } from './restore.component'
     TuiNotification,
     TuiMapperPipe,
     TitleDirective,
-    UnitConversionPipesModule,
     BackupNetworkComponent,
     BackupPhysicalComponent,
     BackupProgressComponent,

web/projects/ui/src/app/routes/portal/routes/system/routes/backups/physical.component.ts

@@ -5,11 +5,7 @@ import {
   output,
 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import {
+import { ConvertBytesPipe, DialogService, i18nPipe } from '@start9labs/shared'
-  DialogService,
-  i18nPipe,
-  UnitConversionPipesModule,
-} from '@start9labs/shared'
 import { TuiButton, TuiIcon } from '@taiga-ui/core'
 import { TuiTooltip } from '@taiga-ui/kit'
 import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
@@ -115,7 +111,7 @@ import { BackupStatusComponent } from './status.component'
     TuiButton,
     TuiIcon,
     TuiTooltip,
-    UnitConversionPipesModule,
+    ConvertBytesPipe,
     PlaceholderComponent,
     BackupStatusComponent,
     TableComponent,

web/projects/ui/src/app/routes/portal/routes/system/routes/dns/dns.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -94,7 +93,6 @@ const ipv6 =
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     FormsModule,
     ReactiveFormsModule,
     FormGroupComponent,

web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -144,7 +143,6 @@ import { GatewaysTableComponent } from './table.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [GatewayService],
   imports: [
-    CommonModule,
     FormsModule,
     RouterLink,
     TuiButton,

web/projects/ui/src/app/routes/portal/routes/updates/updates.component.ts

@@ -7,7 +7,7 @@ import {
 import { toSignal } from '@angular/core/rxjs-interop'
 import {
   Marketplace,
-  StoreIconComponentModule,
+  StoreIconComponent,
   StoreIdentity,
 } from '@start9labs/marketplace'
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
@@ -230,7 +230,7 @@ interface UpdatesData {
     TuiBadgeNotification,
     TuiFade,
     TuiButton,
-    StoreIconComponentModule,
+    StoreIconComponent,
     FilterUpdatesPipe,
     UpdatesItemComponent,
     TitleDirective,

web/projects/ui/src/main.ts

@@ -1,12 +1,11 @@
 import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { bootstrapApplication } from '@angular/platform-browser'
-import { AppModule } from './app/app.module'
+import { AppComponent } from 'src/app/app.component'
-import { environment } from './environments/environment'
+import { APP_CONFIG } from 'src/app/app.config'
+import { environment } from 'src/environments/environment'
 
 if (environment.production) {
   enableProdMode()
 }
 
-platformBrowserDynamic()
+bootstrapApplication(AppComponent, APP_CONFIG).catch(console.error)
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err))

web/tsconfig.json

@@ -19,7 +19,6 @@
     "importHelpers": true,
     "target": "es2022",
     "module": "es2020",
-    "lib": ["es2020", "dom"],
     "useDefineForClassFields": false,
     "paths": {
       /* These paths are relative to each app base folder */