fix(admin-ui): Enable full template type checks and fix issues

packages/admin-ui/src/app/catalog/components/asset-list/asset-list.component.html

@@ -18,7 +18,7 @@
 </vdr-action-bar>
 
 <vdr-asset-gallery
-    [assets]="items$ | async | paginate: (paginationConfig$ | async) || {}"
+    [assets]="(items$ | async)! | paginate: (paginationConfig$ | async) || {}"
     [multiSelect]="true"
 ></vdr-asset-gallery>
 

packages/admin-ui/src/app/catalog/components/product-assets/product-assets.component.html

@@ -50,14 +50,14 @@
             #dl
             [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
-            (cdkDropListDropped)="dropListDropped($event)"
+            (cdkDropListDropped)="dropListDropped()"
         ></div>
         <div
             *ngFor="let asset of assets"
             cdkDropList
             [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
-            (cdkDropListDropped)="dropListDropped($event)"
+            (cdkDropListDropped)="dropListDropped()"
         >
             <vdr-dropdown cdkDrag (cdkDragMoved)="dragMoved($event)">
                 <div

packages/admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.html

@@ -12,11 +12,11 @@
     <ng-template ng-header-tmp>
         <div
             class="search-header"
-            *ngIf="selectComponent.filterValue"
+            *ngIf="selectComponent.searchTerm"
             [class.selected]="isSearchHeaderSelected()"
             (click)="selectComponent.selectTag()"
         >
-            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.filterValue }}
+            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}
         </div>
     </ng-template>
     <ng-template ng-label-tmp let-item="item" let-clear="clear">

packages/admin-ui/src/app/catalog/components/product-variants-editor/product-variants-editor.component.ts

@@ -60,7 +60,7 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     }>;
     variantFormValues: { [id: string]: VariantInfo } = {};
     product: GetProductVariantOptions.Product;
-    private currencyCode: CurrencyCode;
+    currencyCode: CurrencyCode;
     private languageCode: LanguageCode;
 
     constructor(

packages/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html

@@ -2,7 +2,7 @@
     <div
         class="variant-container card"
         *ngFor="let variant of variants; let i = index"
-        [class.disabled]="!formArray.get([i, 'enabled']).value"
+        [class.disabled]="!formArray.get([i, 'enabled'])!.value"
     >
         <ng-container [formGroup]="formArray.at(i)">
             <div class="card-block header-row">

packages/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html

@@ -10,7 +10,7 @@
     <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <ng-template let-variant="item" let-i="index">
         <ng-container [formGroup]="formArray.at(i)">
-            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <div class="card-img">
                     <div class="featured-asset">
                         <img
@@ -23,7 +23,7 @@
                     </div>
                 </div>
             </td>
-            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -34,7 +34,7 @@
                     />
                 </clr-input-container>
             </td>
-            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -48,13 +48,13 @@
             <ng-container *ngFor="let option of variant.options | sort: 'groupId'">
                 <td
                     class="left align-middle"
-                    [class.disabled]="!formArray.get([i, 'enabled']).value"
+                    [class.disabled]="!formArray.get([i, 'enabled'])!.value"
                     [style.color]="optionGroupName(option.groupId) | stringToColor"
                 >
                     {{ option.name }}
                 </td>
             </ng-container>
-            <td class="left align-middle price" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle price" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <vdr-currency-input
                         clrInput
@@ -64,7 +64,7 @@
                     ></vdr-currency-input>
                 </clr-input-container>
             </td>
-            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -76,7 +76,7 @@
                     />
                 </clr-input-container>
             </td>
-            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-toggle-wrapper>
                     <input
                         type="checkbox"

packages/admin-ui/src/app/customer/components/customer-status-label/customer-status-label.component.html

@@ -3,7 +3,7 @@
         <clr-icon shape="check-circle" class="verified-user-icon"></clr-icon>
         {{ 'customer.verified' | translate }}
     </ng-container>
-    <ng-container *ngIf="!customer.user.verified">
+    <ng-container *ngIf="!customer.user?.verified">
         <clr-icon shape="check-circle" class="registered-user-icon"></clr-icon>
         {{ 'customer.registered' | translate }}
     </ng-container>

packages/admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html

@@ -17,7 +17,7 @@
                 class="btn btn-primary"
                 (click)="save()"
                 *vdrIfPermissions="'UpdateAdministrator'"
-                [disabled]="(detailForm.invalid || detailForm.pristine) && !permissionsChanged"
+                [disabled]="(detailForm.invalid || detailForm.pristine)"
             >
                 {{ 'common.update' | translate }}
             </button>

packages/admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html

@@ -46,10 +46,10 @@
         </clr-toggle-wrapper>
     </vdr-form-field>
 
-    <div class="clr-row" formGroupName="configArgs" *ngIf="(entity$ | async).configArgs?.length">
+    <div class="clr-row" formGroupName="configArgs" *ngIf="(entity$ | async)?.configArgs?.length">
         <div class="clr-col">
             <label>{{ 'settings.payment-method-config-options' | translate }}</label>
-            <section class="form-block" *ngFor="let arg of (entity$ | async).configArgs">
+            <section class="form-block" *ngFor="let arg of (entity$ | async)?.configArgs">
                 <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="getType(arg) === 'string'">
                     <input
                         [id]="arg.name"

packages/admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.ts

@@ -36,9 +36,9 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
     detailForm: FormGroup;
     checkers: ConfigurableOperationDefinition[] = [];
     calculators: ConfigurableOperationDefinition[] = [];
-    selectedChecker?: ConfigurableOperation;
+    selectedChecker?: ConfigurableOperation | null;
     selectedCheckerDefinition?: ConfigurableOperationDefinition;
-    selectedCalculator?: ConfigurableOperation;
+    selectedCalculator?: ConfigurableOperation | null;
     selectedCalculatorDefinition?: ConfigurableOperationDefinition;
     activeChannel$: Observable<GetActiveChannel.ActiveChannel>;
     testAddress: TestAddress;

packages/admin-ui/src/app/settings/components/shipping-method-test-result/shipping-method-test-result.component.html

@@ -32,13 +32,13 @@
                     [label]="'common.price' | translate"
                     *ngIf="testResult?.quote?.price != null"
                 >
-                    {{ testResult.quote.price / 100 | currency: currencyCode }}
+                    {{ testResult.quote?.price / 100 | currency: currencyCode }}
                 </vdr-labeled-data>
                 <vdr-labeled-data
                     [label]="'common.price-with-tax' | translate"
                     *ngIf="testResult?.quote?.priceWithTax != null"
                 >
-                    {{ testResult.quote.priceWithTax / 100 | currency: currencyCode }}
+                    {{ testResult.quote?.priceWithTax / 100 | currency: currencyCode }}
                 </vdr-labeled-data>
             </div>
             <vdr-object-tree

packages/admin-ui/src/app/settings/components/test-order-builder/test-order-builder.component.ts

@@ -81,7 +81,7 @@ export class TestOrderBuilderComponent implements OnInit {
         }
     }
 
-    private updateQuantity() {
+    updateQuantity() {
         this.persistToLocalStorage();
         this.orderLinesChange.emit(this.lines);
     }

packages/admin-ui/src/app/shared/components/asset-picker-dialog/asset-picker-dialog.component.html

@@ -15,7 +15,7 @@
     class="clr-input search-input"
 />
 <vdr-asset-gallery
-    [assets]="assets$ | async | paginate: paginationConfig"
+    [assets]="(assets$ | async)! | paginate: paginationConfig"
     [multiSelect]="true"
     (selectionChange)="selection = $event"
 ></vdr-asset-gallery>

packages/admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.html

@@ -24,7 +24,7 @@
         *ngIf="isTextInput"
         type="text"
         [id]="customField.name"
-        [pattern]="customField.pattern"
+        [pattern]="$any(customField).pattern"
         [formControl]="formGroup.get(customField.name)"
         [readonly]="readonly || customField.readonly"
     />

packages/admin-ui/src/app/shared/components/datetime-picker/datetime-picker.component.ts

@@ -203,7 +203,7 @@ export class DatetimePickerComponent implements ControlValueAccessor, AfterViewI
         this.datetimePickerService.selectMinute(parseInt(target.value, 10));
     }
 
-    private closeDatepicker() {
+    closeDatepicker() {
         this.dropdownComponent.toggleOpen();
         this.datetimeInput.nativeElement.focus();
     }

packages/admin-ui/src/app/shared/components/formatted-address/formatted-address.component.html

@@ -7,7 +7,7 @@
     <li *ngIf="address.postalCode">{{ address.postalCode }}</li>
     <li *ngIf="address.country">
         <clr-icon shape="world" size="12"></clr-icon>
-        {{ address.country.name ? address.country.name : address.country }}
+        {{ getCountryName() }}
     </li>
     <li *ngIf="address.phoneNumber">
         <clr-icon shape="phone-handset" size="12"></clr-icon>

packages/admin-ui/src/app/shared/components/formatted-address/formatted-address.component.ts

@@ -10,4 +10,16 @@ import { AddressFragment, OrderAddress } from '../../../common/generated-types';
 })
 export class FormattedAddressComponent {
     @Input() address: AddressFragment | OrderAddress;
+
+    getCountryName(): string {
+        if (this.isAddressFragment(this.address)) {
+            return this.address.country.name;
+        } else {
+            return this.address.country || '';
+        }
+    }
+
+    private isAddressFragment(input: AddressFragment | OrderAddress): input is AddressFragment {
+        return typeof input.country !== 'string';
+    }
 }

packages/admin-ui/src/tsconfig.app.json

@@ -9,5 +9,10 @@
   ],
   "include": [
     "src/**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
 }

packages/admin-ui/tsconfig.lib.prod.json

@@ -1,6 +1,12 @@
 {
   "extends": "./tsconfig.lib.json",
   "angularCompilerOptions": {
-    "enableIvy": false
+    "enableIvy": false,
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
   }
 }