Update/misc frontend (#2191)

* update version to 0.3.4 * update release guide with sdk instructions * remove comment * update page styling * closes #2152, closes #2155, closes #2157 * move marketing site link to description block * re-arrange setup wizard recovery options * move divider for update list item * fix bug in mocks to display lnd as aavailable for update --------- Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
2026-03-26 02:11:53 +00:00 · 2023-03-09 07:02:48 -07:00
parent c9fceafc16
commit c8d89f805b
18 changed files with 268 additions and 213 deletions
--- a/build/RELEASE.md
+++ b/build/RELEASE.md
@@ -70,3 +70,7 @@
  - `make eos_raspberrypi.img`
  - `tar --format=posix -cS -f- eos-<version>-<git hash>-<date>_raspberrypi.img | gzip > eos-<version>-<git hash>-<date>_raspberrypi.tar.gz`
 - Artifact `./eos-<version>-<git hash>-<date>_raspberrypi.tar.gz`
+
+## `embassy-sdk`
+
+- Build and deploy to all registries
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "embassy-os",
-  "version": "0.3.3",
+  "version": "0.3.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "embassy-os",
-      "version": "0.3.3",
+      "version": "0.3.4",
      "dependencies": {
        "@angular/animations": "^14.1.0",
        "@angular/common": "^14.1.0",
--- a/frontend/projects/marketplace/src/pages/show/about/about.component.html
+++ b/frontend/projects/marketplace/src/pages/show/about/about.component.html
@@ -24,3 +24,12 @@
    <h2>{{ pkg.manifest.description.long }}</h2>
  </ion-label>
 </ion-item>
+<div
+  *ngIf="pkg.manifest['marketing-site'] as url"
+  style="padding: 4px 0 10px 14px"
+>
+  <ion-button [href]="url" target="_blank" rel="noreferrer" color="tertiary">
+    View marketing website
+    <ion-icon slot="end" name="open-outline"></ion-icon>
+  </ion-button>
+</div>
--- a/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
+++ b/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
@@ -1,13 +1,3 @@
-<div
-  *ngIf="pkg.manifest['marketing-site'] as url"
-  style="padding: 4px 0 10px 14px"
->
-  <ion-button [href]="url" target="_blank" rel="noreferrer" color="tertiary">
-    View marketing website
-    <ion-icon slot="end" name="open-outline"></ion-icon>
-  </ion-button>
-</div>
-
 <ng-container *ngIf="pkg.manifest.replaces as replaces">
  <div *ngIf="replaces.length" class="ion-padding-bottom">
    <ion-item-divider>Intended to replace</ion-item-divider>
--- a/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts
@@ -154,9 +154,7 @@ export class EmbassyPage {
      await this.stateService.setupEmbassy(logicalname, password)
      await this.navCtrl.navigateForward(`/loading`)
    } catch (e: any) {
-      this.errorToastService.present({
-        message: `${e.message}\n\nRestart Embassy to try again.`,
-      })
+      this.errorToastService.present(e)
      console.error(e)
    } finally {
      loader.dismiss()
--- a/frontend/projects/setup-wizard/src/app/pages/home/home.page.html
+++ b/frontend/projects/setup-wizard/src/app/pages/home/home.page.html
@@ -66,22 +66,6 @@

              <!-- SLIDE 2 -->
              <ng-template swiperSlide>
-                <!-- restore from backup -->
-                <ion-item
-                  button
-                  lines="none"
-                  detail="false"
-                  routerLink="/recover"
-                >
-                  <ion-icon slot="start" name="save-outline"></ion-icon>
-                  <ion-label>
-                    <h2>
-                      <ion-text color="warning">Restore From Backup</ion-text>
-                    </h2>
-                    <p>Restore an Embassy from an encrypted backup</p>
-                  </ion-label>
-                </ion-item>
-
                <!-- attach -->
                <ion-item
                  button
@@ -92,10 +76,12 @@
                  <ion-icon slot="start" name="cube-outline"></ion-icon>
                  <ion-label>
                    <h2>
-                      <ion-text color="primary">Use Existing Drive</ion-text>
+                      <ion-text color="success">Use Existing Drive</ion-text>
                    </h2>
                    <p>
-                      Use an existing, valid Embassy data drive (not a backup)
+                      Attach an existing embassyOS data drive (
+                      <b>not</b>
+                      a backup)
                    </p>
                  </ion-label>
                </ion-item>
@@ -110,15 +96,33 @@
                  <ion-icon slot="start" name="share-outline"></ion-icon>
                  <ion-label>
                    <h2>
-                      <ion-text color="success">Transfer</ion-text>
+                      <ion-text color="primary">Transfer</ion-text>
                    </h2>
                    <p>
-                      Transfer data from an existing, valid Embassy data drive
-                      (not a backup) to a new drive<br />(e.g. in order to
-                      transfer data to another device)
+                      Transfer data from an existing embassyOS data drive (not a
+                      backup) to a new, preferred drive
+                      <br />
                    </p>
                  </ion-label>
                </ion-item>
+
+                <!-- restore from backup -->
+                <ion-item
+                  button
+                  lines="none"
+                  detail="false"
+                  routerLink="/recover"
+                >
+                  <ion-icon slot="start" name="save-outline"></ion-icon>
+                  <ion-label>
+                    <h2>
+                      <ion-text color="warning">
+                        Restore From Backup (Disaster Recovery)
+                      </ion-text>
+                    </h2>
+                    <p>Restore embassyOS data from an encrypted backup</p>
+                  </ion-label>
+                </ion-item>
              </ng-template>
            </swiper>
          </ion-card-content>
--- a/frontend/projects/setup-wizard/src/app/services/state.service.ts
+++ b/frontend/projects/setup-wizard/src/app/services/state.service.ts
@@ -49,9 +49,7 @@ export class StateService {
        )
      }
    } catch (e: any) {
-      this.errorToastService.present({
-        message: `${e.message}\n\nRestart Embassy to try again.`,
-      })
+      this.errorToastService.present(e)
    }
    setTimeout(() => this.pollDataTransferProgress(), 0) // prevent call stack from growing
  }
--- a/frontend/projects/shared/src/classes/http-error.ts
+++ b/frontend/projects/shared/src/classes/http-error.ts
@@ -3,8 +3,6 @@ import { HttpErrorResponse } from '@angular/common/http'
 export class HttpError {
  readonly code = this.error.status
  readonly message = this.error.statusText
-  readonly details = null
-  readonly revision = null

  constructor(private readonly error: HttpErrorResponse) {}
 }
--- a/frontend/projects/shared/src/services/error-toast.service.ts
+++ b/frontend/projects/shared/src/services/error-toast.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core'
 import { IonicSafeString, ToastController } from '@ionic/angular'
+import { HttpError } from '../classes/http-error'

@Injectable({
  providedIn: 'root',
@@ -9,7 +10,7 @@ export class ErrorToastService {

  constructor(private readonly toastCtrl: ToastController) {}

-  async present(e: { message: string }, link?: string): Promise<void> {
+  async present(e: HttpError | string, link?: string): Promise<void> {
    console.error(e)

    if (this.toast) return
@@ -42,12 +43,21 @@ export class ErrorToastService {
 }

 export function getErrorMessage(
-  { message }: { message: string },
+  e: HttpError | string,
  link?: string,
 ): string | IonicSafeString {
-  if (!message) {
-    message = 'Unknown Error.'
+  let message = ''
+
+  if (typeof e === 'string') {
+    message = e
+  } else if (e.code === 0) {
+    message =
+      'Request Error. Your browser blocked the request. This is usually caused by a corrupt browser cache or an overly aggressive ad blocker. Please clear your browser cache and/or adjust your ad blocker and try again'
+  } else if (!e.message) {
+    message = 'Unknown Error'
    link = 'https://docs.start9.com/latest/support/faq'
+  } else {
+    message = e.message
  }

  if (link) {
--- a/frontend/projects/ui/src/app/app.component.ts
+++ b/frontend/projects/ui/src/app/app.component.ts
@@ -6,13 +6,14 @@ import { PatchDataService } from './services/patch-data.service'
 import { PatchMonitorService } from './services/patch-monitor.service'
 import { ConnectionService } from './services/connection.service'
 import { Title } from '@angular/platform-browser'
-import { ServerNameService } from './services/server-name.service'
 import {
  ClientStorageService,
  WidgetDrawer,
 } from './services/client-storage.service'
 import { ThemeSwitcherService } from './services/theme-switcher.service'
 import { THEME } from '@start9labs/shared'
+import { PatchDB } from 'patch-db-client'
+import { DataModel } from './services/patch-db/data-model'

@Component({
  selector: 'app-root',
@@ -30,7 +31,7 @@ export class AppComponent implements OnDestroy {
    private readonly patchData: PatchDataService,
    private readonly patchMonitor: PatchMonitorService,
    private readonly splitPane: SplitPaneTracker,
-    private readonly serverNameService: ServerNameService,
+    private readonly patch: PatchDB<DataModel>,
    readonly authService: AuthService,
    readonly connection: ConnectionService,
    readonly clientStorageService: ClientStorageService,
@@ -38,9 +39,9 @@ export class AppComponent implements OnDestroy {
  ) {}

  ngOnInit() {
-    this.serverNameService.name$.subscribe(({ current }) =>
-      this.titleService.setTitle(current),
-    )
+    this.patch
+      .watch$('ui', 'name')
+      .subscribe(name => this.titleService.setTitle(name || 'embassyOS'))
  }

  splitPaneVisible({ detail }: any) {
--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
@@ -9,7 +9,6 @@ import {
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ActivatedRoute } from '@angular/router'
 import { PatchDB } from 'patch-db-client'
-import { ServerNameService } from 'src/app/services/server-name.service'
 import { combineLatest, firstValueFrom, map, Observable, of } from 'rxjs'
 import { ErrorToastService } from '@start9labs/shared'
 import { EOSService } from 'src/app/services/eos.service'
@@ -52,7 +51,6 @@ export class ServerShowPage {
    private readonly patch: PatchDB<DataModel>,
    private readonly eosService: EOSService,
    private readonly ClientStorageService: ClientStorageService,
-    private readonly serverNameService: ServerNameService,
    private readonly authService: AuthService,
    private readonly toastCtrl: ToastController,
    private readonly config: ConfigService,
@@ -60,19 +58,18 @@ export class ServerShowPage {
  ) {}

  async presentModalName(): Promise<void> {
-    const name = await firstValueFrom(this.serverNameService.name$)
+    const chosenName = await firstValueFrom(this.patch.watch$('ui', 'name'))

    const options: GenericInputOptions = {
      title: 'Set Device Name',
      message: 'This will be displayed in your browser tab',
      label: 'Device Name',
      useMask: false,
-      placeholder: name.default,
+      placeholder: 'embassyOS',
      nullable: true,
-      initialValue: name.current,
+      initialValue: chosenName,
      buttonText: 'Save',
-      submitFn: (value: string) =>
-        this.setDbValue('name', value || name.default),
+      submitFn: (name: string) => this.setName(name || null),
    }

    const modal = await this.modalCtrl.create({
@@ -227,14 +224,14 @@ export class ServerShowPage {
    }
  }

-  private async setDbValue(key: string, value: string): Promise<void> {
+  private async setName(value: string | null): Promise<void> {
    const loader = await this.loadingCtrl.create({
      message: 'Saving...',
    })
    await loader.present()

    try {
-      await this.embassyApi.setDbValue<string>([key], value)
+      await this.embassyApi.setDbValue<string | null>(['name'], value)
    } finally {
      loader.dismiss()
    }
@@ -393,8 +390,8 @@ export class ServerShowPage {
        disabled$: this.eosService.updatingOrBackingUp$,
      },
      {
-        title: 'Set Device Name',
-        description: 'Give your device a name for easy identification',
+        title: 'Browser Tab Title',
+        description: `Customize the display name of your browser tab. This does not affect your server's LAN address.`,
        icon: 'pricetag-outline',
        action: () => this.presentModalName(),
        detail: false,
@@ -429,7 +426,7 @@ export class ServerShowPage {
        disabled$: of(false),
      },
      {
-        title: 'Sideload Service',
+        title: 'Sideload a Service',
        description: `Manually install a service`,
        icon: 'push-outline',
        action: () =>
--- a/frontend/projects/ui/src/app/pages/updates/updates.page.html
+++ b/frontend/projects/ui/src/app/pages/updates/updates.page.html
@@ -7,17 +7,19 @@
  </ion-toolbar>
 </ion-header>

-<ion-content class="ion-padding with-widgets">
+<ion-content class="with-widgets">
  <ion-item-group *ngIf="data$ | async as data">
    <ng-container *ngFor="let host of data.hosts">
-      <ion-item-divider class="header">
-        <div class="inline">
+      <div class="header">
+        <div class="header_items">
+          <store-icon [url]="host.url" size="48px"></store-icon>
+          <div class="pl-1">
            <h1>{{ host.name }}</h1>
-          <store-icon [url]="host.url" size="24px"></store-icon>
+            <p>{{ host.url }}</p>
+          </div>
+        </div>
      </div>
-      </ion-item-divider>

-      <div class="ion-padding-start ion-padding-bottom">
      <ion-item *ngIf="data.errors.includes(host.url)">
        <ion-text color="danger">Request Failed</ion-text>
      </ion-item>
@@ -28,28 +30,33 @@
        <ng-container
          *ngIf="packages | filterUpdates : data.localPkgs as updates"
        >
-            <div *ngFor="let pkg of updates" class="item-container">
-              <ion-item lines="none">
+          <ion-grid>
+            <div *ngFor="let pkg of updates">
              <ng-container *ngIf="data.localPkgs[pkg.manifest.id] as local">
-                  <ion-thumbnail
-                    slot="start"
-                    style="cursor: pointer"
+                <ion-row>
+                  <ion-col>
+                    <ion-accordion-group class="accordian-padding">
+                      <ion-accordion class="item-container">
+                        <ion-item slot="header">
+                          <ion-col class="accordian-padding">
+                            <ion-row
                              (click)="viewInMarketplace(local)"
+                              style="cursor: pointer"
                            >
+                              <ion-thumbnail class="align-center">
                                <img
                                  [src]="'data:image/png;base64,' + pkg.icon | trustUrl"
                                />
                              </ion-thumbnail>
-                  <ion-label>
-                    <h1
-                      (click)="viewInMarketplace(local)"
-                      style="cursor: pointer"
-                    >
-                      {{ pkg.manifest.title }}
-                    </h1>
+                              <ion-label class="pl-1">
+                                <h1>{{ pkg.manifest.title }}</h1>
                                <h2 class="inline">
-                      <span>{{ local.manifest.version | displayEmver }}</span>
-                      &nbsp;<ion-icon name="arrow-forward"></ion-icon>&nbsp;
+                                  <span>
+                                    {{ local.manifest.version | displayEmver }}
+                                  </span>
+                                  &nbsp;
+                                  <ion-icon name="arrow-forward"></ion-icon>
+                                  &nbsp;
                                  <ion-text color="success">
                                    {{ pkg.manifest.version | displayEmver }}
                                  </ion-text>
@@ -57,16 +64,19 @@
                                <p
                                  *ngIf="marketplaceService.updateErrors[pkg.manifest.id] as error"
                                >
-                      <ion-text color="danger">{{ error }}</ion-text>
+                                  <ion-text color="danger">
+                                    {{ error }}
+                                  </ion-text>
                                </p>
                              </ion-label>
-
-                  <div slot="end" style="margin-left: 8px">
+                            </ion-row>
+                          </ion-col>
+                          <div class="align-center">
                            <round-progress
                              *ngIf="local.state === PackageState.Updating else notUpdating"
                              [current]="local['install-progress'] | installProgress"
                              [max]="100"
-                      [radius]="24"
+                              [radius]="15"
                              [stroke]="4"
                              [rounded]="true"
                              color="var(--ion-color-primary)"
@@ -79,25 +89,38 @@
                              <ng-template #updateBtn>
                                <ion-button
                                  (click)="tryUpdate(pkg.manifest, host.url, local)"
-                          [color]="marketplaceService.updateErrors[pkg.manifest.id] ? 'danger' : 'dark'"
+                                  [color]="marketplaceService.updateErrors[pkg.manifest.id] ? 'danger' : 'tertiary'"
                                  strong
+                                  size="default"
                                >
-                          {{ marketplaceService.updateErrors[pkg.manifest.id] ?
-                          'Retry' : 'Update' }}
+                                  {{
+                                  marketplaceService.updateErrors[pkg.manifest.id]
+                                  ? 'Retry' : 'Update' }}
                                </ion-button>
                              </ng-template>
                            </ng-template>
                          </div>
-                </ng-container>
                        </ion-item>
+                        <div class="ion-padding" slot="content">
                          <div class="notes">
-                <h5><b>What's New</b></h5>
-                <p [innerHTML]="pkg.manifest['release-notes'] | markdown"></p>
+                            <p
+                              [innerHTML]="pkg.manifest['release-notes'] | markdown"
+                            ></p>
                          </div>
                        </div>
-
-            <ion-item *ngIf="!updates.length">
-              <p>All services are up to date!</p>
+                      </ion-accordion>
+                    </ion-accordion-group>
+                  </ion-col>
+                </ion-row>
+              </ng-container>
+            </div>
+          </ion-grid>
+          <ion-item
+            *ngIf="!updates.length"
+            class="ion-text-center ion-padding"
+            lines="none"
+          >
+            <ion-label>All services are up to date!</ion-label>
          </ion-item>
        </ng-container>
      </ng-container>
@@ -105,7 +128,6 @@
      <ng-template #loading>
        <skeleton-list [showAvatar]="true" [rows]="2"></skeleton-list>
      </ng-template>
-      </div>
    </ng-container>
  </ion-item-group>
 </ion-content>
--- a/frontend/projects/ui/src/app/pages/updates/updates.page.scss
+++ b/frontend/projects/ui/src/app/pages/updates/updates.page.scss
@@ -8,9 +8,57 @@
 }

 .header {
-  margin-bottom: 20px;
+  padding: 1.5rem;
+  background: var(--ion-color-medium-tint);
+
+  &_items {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+  }
+
  h1 {
-    font-weight: bold;
-    margin: 0 12px 0 0;
+    font-size: 28px;
+    letter-spacing: 1px;
+    margin: 0 0 5px 0;
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0;
+  }
+}
+
+img {
+  height: 85%;
+  width: 85%;
+}
+
+.align-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pl-1 {
+  padding-left: 1rem;
+}
+
+p {
+  font-size: 1rem;
+  margin-top: 0;
+}
+
+ion-item {
+  --background-hover: none;
+}
+
+.accordian-padding {
+  padding: 0.5rem;
+}
+
+@media (max-width: 500px) {
+  .accordian-padding {
+    padding: 0.5rem 0 0.5rem 0;
  }
 }
--- a/frontend/projects/ui/src/app/services/api/api.fixures.ts
+++ b/frontend/projects/ui/src/app/services/api/api.fixures.ts
@@ -20,7 +20,7 @@ export module Mock {
    updated: true,
  }
  export const MarketplaceEos: RR.GetMarketplaceEosRes = {
-    version: '0.3.3',
+    version: '0.3.4',
    headline: 'Our biggest release ever.',
    'release-notes': {
      '0.3.3': 'Some **Markdown** release _notes_ for 0.3.3',
@@ -725,7 +725,7 @@ export module Mock {
        manifest: {
          ...Mock.MockManifestLnd,
          version: '0.11.1',
-          'release-notes': 'release notes for LND 0.11.0',
+          'release-notes': 'release notes for LND 0.11.1',
        },
        categories: ['bitcoin', 'lightning', 'cryptocurrency'],
        versions: ['0.11.0', '0.11.1'],
@@ -1838,9 +1838,9 @@ export module Mock {
  export const lnd: PackageDataEntry = {
    state: PackageState.Installed,
    'static-files': {
-      license: '/public/package-data/lnd/0.20.0/LICENSE.md',
+      license: '/public/package-data/lnd/0.11.0/LICENSE.md',
      icon: '/assets/img/service-icons/lnd.png',
-      instructions: '/public/package-data/lnd/0.20.0/INSTRUCTIONS.md',
+      instructions: '/public/package-data/lnd/0.11.0/INSTRUCTIONS.md',
    },
    manifest: MockManifestLnd,
    installed: {
--- a/frontend/projects/ui/src/app/services/api/mock-patch.ts
+++ b/frontend/projects/ui/src/app/services/api/mock-patch.ts
@@ -44,7 +44,7 @@ export const mockPatchData: DataModel = {
  },
  'server-info': {
    id: 'abcdefgh',
-    version: '0.3.3',
+    version: '0.3.4',
    'last-backup': new Date(new Date().valueOf() - 604800001).toISOString(),
    'lan-address': 'https://embassy-abcdefgh.local',
    'tor-address': 'http://myveryownspecialtoraddress.onion',
@@ -476,7 +476,7 @@ export const mockPatchData: DataModel = {
      manifest: {
        id: 'lnd',
        title: 'Lightning Network Daemon',
-        version: '0.11.1',
+        version: '0.11.0',
        description: {
          short: 'A bolt spec compliant client.',
          long: 'More info about LND. More info about LND. More info about LND.',
@@ -626,7 +626,10 @@ export const mockPatchData: DataModel = {
        },
      },
      installed: {
-        manifest: {} as Manifest,
+        manifest: {
+          ...Mock.MockManifestLnd,
+          version: '0.11.0',
+        },
        'last-backup': null,
        status: {
          configured: true,
--- a/frontend/projects/ui/src/app/services/client-storage.service.ts
+++ b/frontend/projects/ui/src/app/services/client-storage.service.ts
@@ -25,7 +25,6 @@ export class ClientStorageService {
  constructor(private readonly storage: StorageService) {}

  init() {
-    console.log('EMBAWD', enableWidgets)
    this.showDevTools$.next(!!this.storage.get(SHOW_DEV_TOOLS))
    this.showDiskRepair$.next(!!this.storage.get(SHOW_DISK_REPAIR))
    this.widgetDrawer$.next(
--- a/frontend/projects/ui/src/app/services/server-name.service.ts
+++ b/frontend/projects/ui/src/app/services/server-name.service.ts
@@ -1,29 +0,0 @@
-import { Injectable } from '@angular/core'
-import { PatchDB } from 'patch-db-client'
-import { combineLatest, filter, map, Observable } from 'rxjs'
-import { DataModel } from './patch-db/data-model'
-
-export interface ServerNameInfo {
-  current: string
-  default: string
-}
-
-@Injectable({ providedIn: 'root' })
-export class ServerNameService {
-  private readonly chosenName$ = this.patch.watch$('ui', 'name')
-  private readonly hostname$ = this.patch.watch$('server-info', 'hostname')
-
-  readonly name$: Observable<ServerNameInfo> = combineLatest([
-    this.chosenName$,
-    this.hostname$,
-  ]).pipe(
-    map(([chosen, hostname]) => {
-      return {
-        current: chosen || hostname,
-        default: hostname,
-      }
-    }),
-  )
-
-  constructor(private readonly patch: PatchDB<DataModel>) {}
-}
--- a/frontend/projects/ui/src/index.html
+++ b/frontend/projects/ui/src/index.html
@@ -1,22 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
    <meta charset="utf-8" />
-  <title>Embassy</title>
+    <title>embassyOS</title>

    <base href="/" />

-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

-  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"/>
-</head>
+    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico" />
+  </head>

-<body>
+  <body>
    <app-root></app-root>
-  <noscript>Please enable JavaScript to continue using this application.</noscript>
-</body>
-
+    <noscript
+      >Please enable JavaScript to continue using this application.</noscript
+    >
+  </body>
 </html>