ng update 21 wip

angular.json

@@ -18,15 +18,17 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "tsconfig.json",
             "assets": [],
             "styles": [],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           }
         }
       }

jslib/angular/src/components/toastr.component.ts

@@ -13,43 +13,52 @@ import {
 @Component({
   selector: "[toast-component2]",
   template: `
-    <button
-      *ngIf="options.closeButton"
-      (click)="remove()"
-      type="button"
-      class="toast-close-button"
-      aria-label="Close"
-    >
-      <span aria-hidden="true">&times;</span>
-    </button>
+    @if (options.closeButton) {
+      <button
+        (click)="remove()"
+        type="button"
+        class="toast-close-button"
+        aria-label="Close"
+        >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    }
     <div class="icon">
       <i></i>
     </div>
     <div>
-      <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
-        {{ title }} <ng-container *ngIf="duplicatesCount">[{{ duplicatesCount + 1 }}]</ng-container>
+      @if (title) {
+        <div [class]="options.titleClass" [attr.aria-label]="title">
+          {{ title }} @if (duplicatesCount) {
+          [{{ duplicatesCount + 1 }}]
+        }
       </div>
+    }
+    @if (message && options.enableHtml) {
       <div
-        *ngIf="message && options.enableHtml"
         role="alertdialog"
         aria-live="polite"
         [class]="options.messageClass"
         [innerHTML]="message"
       ></div>
+    }
+    @if (message && !options.enableHtml) {
       <div
-        *ngIf="message && !options.enableHtml"
         role="alertdialog"
         aria-live="polite"
         [class]="options.messageClass"
         [attr.aria-label]="message"
-      >
+        >
         {{ message }}
       </div>
+    }
     </div>
-    <div *ngIf="options.progressBar">
-      <div class="toast-progress" [style.width]="width + '%'"></div>
-    </div>
-  `,
+    @if (options.progressBar) {
+      <div>
+        <div class="toast-progress" [style.width]="width + '%'"></div>
+      </div>
+    }
+    `,
   animations: [
     trigger("flyInOut", [
       state("inactive", style({ opacity: 0 })),

package.json

@@ -73,10 +73,10 @@
     "test:types": "npx tsc --noEmit"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.3.3",
     "@angular-eslint/eslint-plugin-template": "20.7.0",
     "@angular-eslint/template-parser": "20.7.0",
-    "@angular/compiler-cli": "20.3.15",
+    "@angular/build": "^21.0.5",
+    "@angular/compiler-cli": "21.0.8",
     "@electron/notarize": "2.5.0",
     "@electron/rebuild": "4.0.1",
     "@fluffy-spoon/substitute": "1.208.0",
@@ -143,16 +143,16 @@
     "zone.js": "0.15.1"
   },
   "dependencies": {
-    "@angular/animations": "20.3.15",
+    "@angular/animations": "21.0.8",
     "@angular/cdk": "20.2.14",
-    "@angular/cli": "20.3.3",
-    "@angular/common": "20.3.15",
-    "@angular/compiler": "20.3.15",
-    "@angular/core": "20.3.15",
-    "@angular/forms": "20.3.15",
-    "@angular/platform-browser": "20.3.15",
-    "@angular/platform-browser-dynamic": "20.3.15",
-    "@angular/router": "20.3.15",
+    "@angular/cli": "21.0.5",
+    "@angular/common": "21.0.8",
+    "@angular/compiler": "21.0.8",
+    "@angular/core": "21.0.8",
+    "@angular/forms": "21.0.8",
+    "@angular/platform-browser": "21.0.8",
+    "@angular/platform-browser-dynamic": "21.0.8",
+    "@angular/router": "21.0.8",
     "@microsoft/microsoft-graph-client": "3.0.7",
     "big-integer": "1.6.52",
     "bootstrap": "5.3.7",

src/app/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode } from "@angular/core";
+import { enableProdMode, provideZoneChangeDetection } from "@angular/core";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
 import { isDev } from "@/jslib/electron/src/utils";
@@ -11,4 +11,7 @@ if (!isDev()) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  applicationProviders: [provideZoneChangeDetection()],
+  preserveWhitespaces: true,
+});

src/app/tabs/dashboard.component.html

@@ -3,17 +3,25 @@
   <div class="card-body">
     <p>
       {{ "lastGroupSync" | i18n }}:
-      <span *ngIf="!lastGroupSync">-</span>
+      @if (!lastGroupSync) {
+        <span>-</span>
+      }
       {{ lastGroupSync | date: "medium" }}
       <br />
       {{ "lastUserSync" | i18n }}:
-      <span *ngIf="!lastUserSync">-</span>
+      @if (!lastUserSync) {
+        <span>-</span>
+      }
       {{ lastUserSync | date: "medium" }}
     </p>
     <p>
       {{ "syncStatus" | i18n }}:
-      <strong *ngIf="syncRunning" class="text-success">{{ "running" | i18n }}</strong>
-      <strong *ngIf="!syncRunning" class="text-danger">{{ "stopped" | i18n }}</strong>
+      @if (syncRunning) {
+        <strong class="text-success">{{ "running" | i18n }}</strong>
+      }
+      @if (!syncRunning) {
+        <strong class="text-danger">{{ "stopped" | i18n }}</strong>
+      }
     </p>
     <form #startForm [appApiAction]="startPromise" class="d-inline">
       <button
@@ -60,57 +68,85 @@
       />
       <label class="form-check-label" for="simSinceLast">{{ "testLastSync" | i18n }}</label>
     </div>
-    <ng-container *ngIf="!simForm.loading && (simUsers || simGroups)">
+    @if (!simForm.loading && (simUsers || simGroups)) {
       <hr />
       <div class="row">
         <div class="col-lg">
           <h4>{{ "users" | i18n }}</h4>
-          <ul class="bwi-ul testing-list" *ngIf="simEnabledUsers && simEnabledUsers.length">
-            <li *ngFor="let u of simEnabledUsers" title="{{ u.referenceId }}">
-              <i class="bwi bwi-li bwi-user"></i>
-              {{ u.displayName }}
-            </li>
-          </ul>
-          <p *ngIf="!simEnabledUsers || !simEnabledUsers.length">
-            {{ "noUsers" | i18n }}
-          </p>
+          @if (simEnabledUsers && simEnabledUsers.length) {
+            <ul class="bwi-ul testing-list">
+              @for (u of simEnabledUsers; track u) {
+                <li title="{{ u.referenceId }}">
+                  <i class="bwi bwi-li bwi-user"></i>
+                  {{ u.displayName }}
+                </li>
+              }
+            </ul>
+          }
+          @if (!simEnabledUsers || !simEnabledUsers.length) {
+            <p>
+              {{ "noUsers" | i18n }}
+            </p>
+          }
           <h4>{{ "disabledUsers" | i18n }}</h4>
-          <ul class="bwi-ul testing-list" *ngIf="simDisabledUsers && simDisabledUsers.length">
-            <li *ngFor="let u of simDisabledUsers" title="{{ u.referenceId }}">
-              <i class="bwi bwi-li bwi-user"></i>
-              {{ u.displayName }}
-            </li>
-          </ul>
-          <p *ngIf="!simDisabledUsers || !simDisabledUsers.length">
-            {{ "noUsers" | i18n }}
-          </p>
+          @if (simDisabledUsers && simDisabledUsers.length) {
+            <ul class="bwi-ul testing-list">
+              @for (u of simDisabledUsers; track u) {
+                <li title="{{ u.referenceId }}">
+                  <i class="bwi bwi-li bwi-user"></i>
+                  {{ u.displayName }}
+                </li>
+              }
+            </ul>
+          }
+          @if (!simDisabledUsers || !simDisabledUsers.length) {
+            <p>
+              {{ "noUsers" | i18n }}
+            </p>
+          }
           <h4>{{ "deletedUsers" | i18n }}</h4>
-          <ul class="bwi-ul testing-list" *ngIf="simDeletedUsers && simDeletedUsers.length">
-            <li *ngFor="let u of simDeletedUsers" title="{{ u.referenceId }}">
-              <i class="bwi bwi-li bwi-user"></i>
-              {{ u.displayName }}
-            </li>
-          </ul>
-          <p *ngIf="!simDeletedUsers || !simDeletedUsers.length">
-            {{ "noUsers" | i18n }}
-          </p>
+          @if (simDeletedUsers && simDeletedUsers.length) {
+            <ul class="bwi-ul testing-list">
+              @for (u of simDeletedUsers; track u) {
+                <li title="{{ u.referenceId }}">
+                  <i class="bwi bwi-li bwi-user"></i>
+                  {{ u.displayName }}
+                </li>
+              }
+            </ul>
+          }
+          @if (!simDeletedUsers || !simDeletedUsers.length) {
+            <p>
+              {{ "noUsers" | i18n }}
+            </p>
+          }
         </div>
         <div class="col-lg">
           <h4>{{ "groups" | i18n }}</h4>
-          <ul class="bwi-ul testing-list" *ngIf="simGroups && simGroups.length">
-            <li *ngFor="let g of simGroups" title="{{ g.referenceId }}">
-              <i class="bwi bwi-li bwi-sitemap"></i>
-              {{ g.displayName }}
-              <ul class="small" *ngIf="g.users && g.users.length">
-                <li *ngFor="let u of g.users" title="{{ u.referenceId }}">
-                  {{ u.displayName }}
+          @if (simGroups && simGroups.length) {
+            <ul class="bwi-ul testing-list">
+              @for (g of simGroups; track g) {
+                <li title="{{ g.referenceId }}">
+                  <i class="bwi bwi-li bwi-sitemap"></i>
+                  {{ g.displayName }}
+                  @if (g.users && g.users.length) {
+                    <ul class="small">
+                      @for (u of g.users; track u) {
+                        <li title="{{ u.referenceId }}">
+                          {{ u.displayName }}
+                        </li>
+                      }
+                    </ul>
+                  }
                 </li>
-              </ul>
-            </li>
-          </ul>
-          <p *ngIf="!simGroups || !simGroups.length">{{ "noGroups" | i18n }}</p>
+              }
+            </ul>
+          }
+          @if (!simGroups || !simGroups.length) {
+            <p>{{ "noGroups" | i18n }}</p>
+          }
         </div>
       </div>
-    </ng-container>
+    }
   </div>
 </div>

src/app/tabs/settings.component.html

@@ -6,9 +6,11 @@
         <div class="mb-3">
           <label for="directory" class="form-label">{{ "type" | i18n }}</label>
           <select class="form-select" id="directory" name="Directory" [(ngModel)]="directory">
-            <option *ngFor="let o of directoryOptions" [ngValue]="o.value">
-              {{ o.name }}
-            </option>
+            @for (o of directoryOptions; track o) {
+              <option [ngValue]="o.value">
+                {{ o.name }}
+              </option>
+            }
           </select>
         </div>
         <div [hidden]="directory != directoryType.Ldap">
@@ -51,20 +53,22 @@
               <label class="form-check-label" for="ad">{{ "ldapAd" | i18n }}</label>
             </div>
           </div>
-          <div class="mb-3" *ngIf="!ldap.ad">
-            <div class="form-check">
-              <input
-                class="form-check-input"
-                type="checkbox"
-                id="pagedSearch"
-                [(ngModel)]="ldap.pagedSearch"
-                name="PagedSearch"
-              />
-              <label class="form-check-label" for="pagedSearch">{{
-                "ldapPagedResults" | i18n
-              }}</label>
+          @if (!ldap.ad) {
+            <div class="mb-3">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  id="pagedSearch"
+                  [(ngModel)]="ldap.pagedSearch"
+                  name="PagedSearch"
+                />
+                <label class="form-check-label" for="pagedSearch">{{
+                  "ldapPagedResults" | i18n
+                }}</label>
+              </div>
             </div>
-          </div>
+          }
           <div class="mb-3">
             <div class="form-check">
               <input
@@ -79,116 +83,122 @@
               }}</label>
             </div>
           </div>
-          <div class="ms-4" *ngIf="ldap.ssl">
-            <div class="mb-3">
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  [value]="false"
-                  id="ssl"
-                  [(ngModel)]="ldap.startTls"
-                  name="SSL"
-                />
-                <label class="form-check-label" for="ssl">{{ "ldapSsl" | i18n }}</label>
+          @if (ldap.ssl) {
+            <div class="ms-4">
+              <div class="mb-3">
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    [value]="false"
+                    id="ssl"
+                    [(ngModel)]="ldap.startTls"
+                    name="SSL"
+                  />
+                  <label class="form-check-label" for="ssl">{{ "ldapSsl" | i18n }}</label>
+                </div>
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    [value]="true"
+                    id="startTls"
+                    [(ngModel)]="ldap.startTls"
+                    name="StartTLS"
+                  />
+                  <label class="form-check-label" for="startTls">{{ "ldapTls" | i18n }}</label>
+                </div>
               </div>
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  [value]="true"
-                  id="startTls"
-                  [(ngModel)]="ldap.startTls"
-                  name="StartTLS"
-                />
-                <label class="form-check-label" for="startTls">{{ "ldapTls" | i18n }}</label>
+              @if (ldap.startTls) {
+                <div class="ms-4">
+                  <p>{{ "ldapTlsUntrustedDesc" | i18n }}</p>
+                  <div class="mb-3">
+                    <label for="tlsCaPath" class="form-label">{{ "ldapTlsCa" | i18n }}</label>
+                    <input
+                      type="file"
+                      class="form-control mb-2"
+                      id="tlsCaPath_file"
+                      (change)="setSslPath('tlsCaPath')"
+                    />
+                    <input
+                      type="text"
+                      class="form-control"
+                      id="tlsCaPath"
+                      name="TLSCaPath"
+                      [(ngModel)]="ldap.tlsCaPath"
+                    />
+                  </div>
+                </div>
+              }
+              @if (!ldap.startTls) {
+                <div class="ms-4">
+                  <p>{{ "ldapSslUntrustedDesc" | i18n }}</p>
+                  <div class="mb-3">
+                    <label for="sslCertPath" class="form-label">{{ "ldapSslCert" | i18n }}</label>
+                    <input
+                      type="file"
+                      class="form-control mb-2"
+                      id="sslCertPath_file"
+                      (change)="setSslPath('sslCertPath')"
+                    />
+                    <input
+                      type="text"
+                      class="form-control"
+                      id="sslCertPath"
+                      name="SSLCertPath"
+                      [(ngModel)]="ldap.sslCertPath"
+                    />
+                  </div>
+                  <div class="mb-3">
+                    <label for="sslKeyPath" class="form-label">{{ "ldapSslKey" | i18n }}</label>
+                    <input
+                      type="file"
+                      class="form-control mb-2"
+                      id="sslKeyPath_file"
+                      (change)="setSslPath('sslKeyPath')"
+                    />
+                    <input
+                      type="text"
+                      class="form-control"
+                      id="sslKeyPath"
+                      name="SSLKeyPath"
+                      [(ngModel)]="ldap.sslKeyPath"
+                    />
+                  </div>
+                  <div class="mb-3">
+                    <label for="sslCaPath" class="form-label">{{ "ldapSslCa" | i18n }}</label>
+                    <input
+                      type="file"
+                      class="form-control mb-2"
+                      id="sslCaPath_file"
+                      (change)="setSslPath('sslCaPath')"
+                    />
+                    <input
+                      type="text"
+                      class="form-control"
+                      id="sslCaPath"
+                      name="SSLCaPath"
+                      [(ngModel)]="ldap.sslCaPath"
+                    />
+                  </div>
+                </div>
+              }
+              <div class="mb-3">
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="certDoNotVerify"
+                    [(ngModel)]="ldap.sslAllowUnauthorized"
+                    name="CertDoNoVerify"
+                  />
+                  <label class="form-check-label" for="certDoNotVerify">{{
+                    "ldapCertDoNotVerify" | i18n
+                  }}</label>
+                </div>
               </div>
             </div>
-            <div class="ms-4" *ngIf="ldap.startTls">
-              <p>{{ "ldapTlsUntrustedDesc" | i18n }}</p>
-              <div class="mb-3">
-                <label for="tlsCaPath" class="form-label">{{ "ldapTlsCa" | i18n }}</label>
-                <input
-                  type="file"
-                  class="form-control mb-2"
-                  id="tlsCaPath_file"
-                  (change)="setSslPath('tlsCaPath')"
-                />
-                <input
-                  type="text"
-                  class="form-control"
-                  id="tlsCaPath"
-                  name="TLSCaPath"
-                  [(ngModel)]="ldap.tlsCaPath"
-                />
-              </div>
-            </div>
-            <div class="ms-4" *ngIf="!ldap.startTls">
-              <p>{{ "ldapSslUntrustedDesc" | i18n }}</p>
-              <div class="mb-3">
-                <label for="sslCertPath" class="form-label">{{ "ldapSslCert" | i18n }}</label>
-                <input
-                  type="file"
-                  class="form-control mb-2"
-                  id="sslCertPath_file"
-                  (change)="setSslPath('sslCertPath')"
-                />
-                <input
-                  type="text"
-                  class="form-control"
-                  id="sslCertPath"
-                  name="SSLCertPath"
-                  [(ngModel)]="ldap.sslCertPath"
-                />
-              </div>
-              <div class="mb-3">
-                <label for="sslKeyPath" class="form-label">{{ "ldapSslKey" | i18n }}</label>
-                <input
-                  type="file"
-                  class="form-control mb-2"
-                  id="sslKeyPath_file"
-                  (change)="setSslPath('sslKeyPath')"
-                />
-                <input
-                  type="text"
-                  class="form-control"
-                  id="sslKeyPath"
-                  name="SSLKeyPath"
-                  [(ngModel)]="ldap.sslKeyPath"
-                />
-              </div>
-              <div class="mb-3">
-                <label for="sslCaPath" class="form-label">{{ "ldapSslCa" | i18n }}</label>
-                <input
-                  type="file"
-                  class="form-control mb-2"
-                  id="sslCaPath_file"
-                  (change)="setSslPath('sslCaPath')"
-                />
-                <input
-                  type="text"
-                  class="form-control"
-                  id="sslCaPath"
-                  name="SSLCaPath"
-                  [(ngModel)]="ldap.sslCaPath"
-                />
-              </div>
-            </div>
-            <div class="mb-3">
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  id="certDoNotVerify"
-                  [(ngModel)]="ldap.sslAllowUnauthorized"
-                  name="CertDoNoVerify"
-                />
-                <label class="form-check-label" for="certDoNotVerify">{{
-                  "ldapCertDoNotVerify" | i18n
-                }}</label>
-              </div>
-            </div>
-          </div>
+          }
           <div class="mb-3" [hidden]="true">
             <div class="form-check">
               <input
@@ -211,10 +221,12 @@
                 name="Username"
                 [(ngModel)]="ldap.username"
               />
-              <div class="form-text" *ngIf="ldap.ad">{{ "ex" | i18n }} company\admin</div>
-              <div class="form-text" *ngIf="!ldap.ad">
-                {{ "ex" | i18n }} cn=admin,dc=company,dc=com
-              </div>
+              @if (ldap.ad) {
+                <div class="form-text">{{ "ex" | i18n }} company\admin</div>
+              }
+              @if (!ldap.ad) {
+                <div class="form-text">{{ "ex" | i18n }} cn=admin,dc=company,dc=com</div>
+              }
             </div>
             <div class="mb-3">
               <label for="password" class="form-label">{{ "password" | i18n }}</label>
@@ -604,18 +616,24 @@
               name="UserFilter"
               [(ngModel)]="sync.userFilter"
             ></textarea>
-            <div class="form-text" *ngIf="directory === directoryType.Ldap">
-              {{ "ex" | i18n }} (&amp;(givenName=John)(|(l=Dallas)(l=Austin)))
-            </div>
-            <div class="form-text" *ngIf="directory === directoryType.EntraID">
-              {{ "ex" | i18n }} exclude:joe&#64;company.com
-            </div>
-            <div class="form-text" *ngIf="directory === directoryType.Okta">
-              {{ "ex" | i18n }} exclude:joe&#64;company.com | profile.firstName eq "John"
-            </div>
-            <div class="form-text" *ngIf="directory === directoryType.GSuite">
-              {{ "ex" | i18n }} exclude:joe&#64;company.com | orgUnitPath=/Engineering
-            </div>
+            @if (directory === directoryType.Ldap) {
+              <div class="form-text">
+                {{ "ex" | i18n }} (&amp;(givenName=John)(|(l=Dallas)(l=Austin)))
+              </div>
+            }
+            @if (directory === directoryType.EntraID) {
+              <div class="form-text">{{ "ex" | i18n }} exclude:joe&#64;company.com</div>
+            }
+            @if (directory === directoryType.Okta) {
+              <div class="form-text">
+                {{ "ex" | i18n }} exclude:joe&#64;company.com | profile.firstName eq "John"
+              </div>
+            }
+            @if (directory === directoryType.GSuite) {
+              <div class="form-text">
+                {{ "ex" | i18n }} exclude:joe&#64;company.com | orgUnitPath=/Engineering
+              </div>
+            }
           </div>
           <div class="mb-3" [hidden]="directory != directoryType.Ldap">
             <label for="userPath" class="form-label">{{ "userPath" | i18n }}</label>
@@ -681,18 +699,20 @@
               name="GroupFilter"
               [(ngModel)]="sync.groupFilter"
             ></textarea>
-            <div class="form-text" *ngIf="directory === directoryType.Ldap">
-              {{ "ex" | i18n }} (&amp;(objectClass=group)(!(cn=Sales*))(!(cn=IT*)))
-            </div>
-            <div class="form-text" *ngIf="directory === directoryType.EntraID">
-              {{ "ex" | i18n }} include:Sales,IT
-            </div>
-            <div class="form-text" *ngIf="directory === directoryType.Okta">
-              {{ "ex" | i18n }} include:Sales,IT | type eq "APP_GROUP"
-            </div>
-            <div class="form-text" *ngIf="directory === directoryType.GSuite">
-              {{ "ex" | i18n }} include:Sales,IT
-            </div>
+            @if (directory === directoryType.Ldap) {
+              <div class="form-text">
+                {{ "ex" | i18n }} (&amp;(objectClass=group)(!(cn=Sales*))(!(cn=IT*)))
+              </div>
+            }
+            @if (directory === directoryType.EntraID) {
+              <div class="form-text">{{ "ex" | i18n }} include:Sales,IT</div>
+            }
+            @if (directory === directoryType.Okta) {
+              <div class="form-text">{{ "ex" | i18n }} include:Sales,IT | type eq "APP_GROUP"</div>
+            }
+            @if (directory === directoryType.GSuite) {
+              <div class="form-text">{{ "ex" | i18n }} include:Sales,IT</div>
+            }
           </div>
           <div class="mb-3" [hidden]="directory != directoryType.Ldap">
             <label for="groupPath" class="form-label">{{ "groupPath" | i18n }}</label>
@@ -703,8 +723,12 @@
               name="GroupPath"
               [(ngModel)]="sync.groupPath"
             />
-            <div class="form-text" *ngIf="!ldap.ad">{{ "ex" | i18n }} CN=Groups</div>
-            <div class="form-text" *ngIf="ldap.ad">{{ "ex" | i18n }} CN=Users</div>
+            @if (!ldap.ad) {
+              <div class="form-text">{{ "ex" | i18n }} CN=Groups</div>
+            }
+            @if (ldap.ad) {
+              <div class="form-text">{{ "ex" | i18n }} CN=Users</div>
+            }
           </div>
           <div [hidden]="directory != directoryType.Ldap || ldap.ad">
             <div class="mb-3">

src/scss/bootstrap.scss

@@ -28,4 +28,4 @@ $danger: map_get($theme-colors, "danger");
 $secondary: map_get($theme-colors, "secondary");
 $secondary-alt: map_get($theme-colors, "secondary-alt");
 
-@import "~bootstrap/scss/bootstrap.scss";
+@import "bootstrap/scss/bootstrap.scss";

src/scss/environment.scss

@@ -1,4 +1,4 @@
-@import "~bootstrap/scss/_variables.scss";
+@import "~ootstrap/scss/_variables.scss";
 
 html.os_windows {
   body {

src/scss/misc.scss

@@ -1,4 +1,4 @@
-@import "~bootstrap/scss/_variables.scss";
+@import "bootstrap/scss/_variables.scss";
 
 body {
   padding: 10px 0 20px 0;

src/scss/plugins.scss

@@ -1,6 +1,6 @@
-@import "~ngx-toastr/toastr";
+@import "ngx-toastr/toastr";
 
-@import "~bootstrap/scss/_variables.scss";
+@import "bootstrap/scss/_variables.scss";
 
 .toast-container {
   .toast-close-button {

tsconfig.json

@@ -5,13 +5,12 @@
   },
   "compilerOptions": {
     "pretty": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "noImplicitAny": true,
     "target": "ES2016",
+    "esModuleInterop": true,
     "module": "ES2020",
-    "lib": ["es5", "es6", "es7", "dom"],
     "sourceMap": true,
-    "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "declaration": false,