feat(admin-ui): Update Angular to v9

Note that AOT is explicitly turned off in angular.json for plugin compilation. This is due to a bug in the ng compiler dealing with barrel files (i.e. the index.ts in the admin ui): https://github.com/angular/angular/issues/20931

In the next minor release the UI plugin dev workflow will be improved in such a way as to allow AOT-compiled ui extensions.

packages/admin-ui/angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -10,13 +10,14 @@
       "prefix": "vdr",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "style": "scss"
         }
       },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "baseHref": "/admin/",
             "outputPath": "dist",
             "index": "src/index.html",
@@ -43,12 +44,20 @@
               "../../node_modules/trix/dist/trix-core.js"
             ],
             "stylePreprocessorOptions": {
-              "includePaths": ["./src/styles"]
+              "includePaths": [
+                "./src/styles"
+              ]
             },
             "showCircularDependencies": false
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -66,6 +75,12 @@
               "buildOptimizer": true
             },
             "plugin": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -77,7 +92,7 @@
               "sourceMap": true,
               "extractCss": true,
               "namedChunks": false,
-              "aot": true,
+              "aot": false,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -91,6 +106,13 @@
               ]
             },
             "plugin-watch": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "aot": false,
               "styles": [
                 "../../@clr/icons/clr-icons.min.css",
                 "src/styles/styles.scss",
@@ -101,6 +123,13 @@
               ]
             },
             "plugin-dev": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "aot": false,
               "styles": [
                 "../../node_modules/@clr/icons/clr-icons.min.css",
                 "src/styles/styles.scss",
@@ -151,7 +180,9 @@
               "src/assets"
             ],
             "stylePreprocessorOptions": {
-              "includePaths": ["./src/styles"]
+              "includePaths": [
+                "./src/styles"
+              ]
             }
           }
         },
@@ -200,11 +231,12 @@
   "defaultProject": "vendure-admin",
   "schematics": {
     "@schematics/angular:component": {
-      "spec": false,
+      "skipTests": true,
       "changeDetection": "OnPush"
     }
   },
   "cli": {
-    "packageManager": "yarn"
+    "packageManager": "yarn",
+    "analytics": "61fa89f7-706a-46c0-bcdb-b1d3664195ce"
   }
-}
+}

packages/admin-ui/package.json

@@ -17,19 +17,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@angular-devkit/build-angular": "^0.802.0",
-    "@angular/animations": "^8.2.0",
-    "@angular/cdk": "^8.1.2",
-    "@angular/cli": "^8.2.0",
-    "@angular/common": "^8.2.0",
-    "@angular/compiler": "^8.2.0",
-    "@angular/compiler-cli": "^8.2.0",
-    "@angular/core": "^8.2.0",
-    "@angular/forms": "^8.2.0",
-    "@angular/language-service": "^8.2.0",
-    "@angular/platform-browser": "^8.2.0",
-    "@angular/platform-browser-dynamic": "^8.2.0",
-    "@angular/router": "^8.2.0",
+    "@angular-devkit/build-angular": "~0.900.3",
+    "@angular/animations": "^9.0.2",
+    "@angular/cdk": "^9.0.1",
+    "@angular/cli": "^9.0.3",
+    "@angular/common": "^9.0.2",
+    "@angular/compiler": "^9.0.2",
+    "@angular/compiler-cli": "^9.0.2",
+    "@angular/core": "^9.0.2",
+    "@angular/forms": "^9.0.2",
+    "@angular/language-service": "^9.0.2",
+    "@angular/platform-browser": "^9.0.2",
+    "@angular/platform-browser-dynamic": "^9.0.2",
+    "@angular/router": "^9.0.2",
     "@clr/angular": "^2.1.0",
     "@clr/icons": "^2.1.0",
     "@clr/ui": "^2.1.0",
@@ -52,20 +52,20 @@
     "graphql-tag": "^2.10.3",
     "messageformat": "2.2.0",
     "ngx-pagination": "^5.0.0",
-    "ngx-translate-messageformat-compiler": "^4.4.0",
-    "rxjs": "^6.5.2",
+    "ngx-translate-messageformat-compiler": "^4.5.0",
+    "rxjs": "^6.5.4",
     "trix": "^1.2.2",
     "tslib": "^1.10.0",
-    "typescript": "~3.5.3",
-    "zone.js": "^0.10.0"
+    "typescript": "~3.7.5",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@biesbjerg/ngx-translate-extract": "^4.2.0",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@types/jasmine": "~3.3.16",
     "@types/jasminewd2": "~2.0.6",
-    "@types/node": "~12.6.9",
-    "codelyzer": "~5.1.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
@@ -79,4 +79,4 @@
     "rimraf": "^3.0.0",
     "tslint": "^5.12.1"
   }
-}
+}

packages/admin-ui/src/app/app.module.ts

@@ -4,13 +4,13 @@ import { Inject, Injectable, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
 
 import { AppComponent } from './app.component';
 import { routes } from './app.routes';
 import { getDefaultLanguage } from './common/utilities/get-default-language';
 import { CoreModule } from './core/core.module';
 import { CustomHttpTranslationLoader } from './core/providers/i18n/custom-http-loader';
+import { InjectableTranslateMessageFormatCompiler } from './core/providers/i18n/custom-message-format-compiler';
 import { I18nService } from './core/providers/i18n/i18n.service';
 import { DataService } from './data/providers/data.service';
 import { SharedExtensionsModule } from './extensions/shared-extensions.module';
@@ -37,7 +37,7 @@ export function HttpLoaderFactory(http: HttpClient, location: PlatformLocation)
                 useFactory: HttpLoaderFactory,
                 deps: [HttpClient, PlatformLocation],
             },
-            compiler: { provide: TranslateCompiler, useClass: TranslateMessageFormatCompiler },
+            compiler: { provide: TranslateCompiler, useClass: InjectableTranslateMessageFormatCompiler },
         }),
         CoreModule,
         SharedExtensionsModule,

packages/admin-ui/src/app/app.routes.ts

@@ -5,7 +5,7 @@ import { AppShellComponent } from './core/components/app-shell/app-shell.compone
 import { AuthGuard } from './core/providers/guard/auth.guard';
 
 export const routes: Route[] = [
-    { path: 'login', loadChildren: './login/login.module#LoginModule' },
+    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
     {
         path: '',
         canActivate: [AuthGuard],
@@ -17,31 +17,32 @@ export const routes: Route[] = [
             {
                 path: '',
                 pathMatch: 'full',
-                loadChildren: './dashboard/dashboard.module#DashboardModule',
+                loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
             },
             {
                 path: 'catalog',
-                loadChildren: './catalog/catalog.module#CatalogModule',
+                loadChildren: () => import('./catalog/catalog.module').then(m => m.CatalogModule),
             },
             {
                 path: 'customer',
-                loadChildren: './customer/customer.module#CustomerModule',
+                loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule),
             },
             {
                 path: 'orders',
-                loadChildren: './order/order.module#OrderModule',
+                loadChildren: () => import('./order/order.module').then(m => m.OrderModule),
             },
             {
                 path: 'marketing',
-                loadChildren: './marketing/marketing.module#MarketingModule',
+                loadChildren: () => import('./marketing/marketing.module').then(m => m.MarketingModule),
             },
             {
                 path: 'settings',
-                loadChildren: './settings/settings.module#SettingsModule',
+                loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule),
             },
             {
                 path: 'extensions',
-                loadChildren: `./extensions/lazy-extensions.module#LazyExtensionsModule`,
+                loadChildren: () =>
+                    import(`./extensions/lazy-extensions.module`).then(m => m.LazyExtensionsModule),
             },
         ],
     },

packages/admin-ui/src/app/catalog/catalog.module.ts

@@ -60,11 +60,6 @@ import { ProductVariantsResolver } from './providers/routing/product-variants-re
         AssignProductsToChannelDialogComponent,
         AssetDetailComponent,
     ],
-    entryComponents: [
-        ApplyFacetDialogComponent,
-        UpdateProductOptionDialogComponent,
-        AssignProductsToChannelDialogComponent,
-    ],
     providers: [
         ProductResolver,
         FacetResolver,

packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts

@@ -47,7 +47,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
     allFilters: ConfigurableOperationDefinition[] = [];
     facets$: Observable<FacetWithValues.Fragment[]>;
     activeChannel$: Observable<GetActiveChannel.ActiveChannel>;
-    @ViewChild('collectionContents', { static: false }) contentsComponent: CollectionContentsComponent;
+    @ViewChild('collectionContents') contentsComponent: CollectionContentsComponent;
 
     constructor(
         router: Router,

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

@@ -44,9 +44,10 @@
 </ng-template>
 
 <ng-template #assetList>
-    <div class="all-assets" [class.compact]="compact" cdkDropListGroup>
+    <div class="all-assets" [class.compact]="compact" cdkDropListGroup #dlg>
         <div
             cdkDropList
+            #dl
             [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
             (cdkDropListDropped)="dropListDropped($event)"

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

@@ -43,8 +43,8 @@ export class ProductAssetsComponent implements AfterViewInit {
     @Input()
     compact = false;
     @Output() change = new EventEmitter<AssetChange>();
-    @ViewChild(CdkDropListGroup, { static: false }) listGroup: CdkDropListGroup<CdkDropList>;
-    @ViewChild(CdkDropList, { static: false }) placeholder: CdkDropList;
+    @ViewChild('dlg', { static: false, read: CdkDropListGroup }) listGroup: CdkDropListGroup<CdkDropList>;
+    @ViewChild('dl', { static: false, read: CdkDropList }) placeholder: CdkDropList;
 
     public target: CdkDropList | null;
     public targetIndex: number;

packages/admin-ui/src/app/core/core.module.ts

@@ -48,6 +48,5 @@ import { OverlayHostService } from './providers/overlay-host/overlay-host.servic
         JobListComponent,
         ChannelSwitcherComponent,
     ],
-    entryComponents: [NotificationComponent],
 })
 export class CoreModule {}

packages/admin-ui/src/app/core/providers/i18n/custom-message-format-compiler.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
+
+/**
+ * Work-around for Angular 9 compat.
+ * See https://github.com/lephyrus/ngx-translate-messageformat-compiler/issues/53#issuecomment-583677994
+ */
+@Injectable({ providedIn: 'root' })
+export class InjectableTranslateMessageFormatCompiler extends TranslateMessageFormatCompiler {}

packages/admin-ui/src/app/order/order.module.ts

@@ -44,12 +44,6 @@ import { OrderResolver } from './providers/routing/order-resolver';
         SimpleItemListComponent,
         OrderCustomFieldsCardComponent,
     ],
-    entryComponents: [
-        FulfillOrderDialogComponent,
-        RefundOrderDialogComponent,
-        CancelOrderDialogComponent,
-        SettleRefundDialogComponent,
-    ],
     providers: [OrderResolver],
 })
 export class OrderModule {}

packages/admin-ui/src/app/settings/settings.module.ts

@@ -64,7 +64,6 @@ import { settingsRoutes } from './settings.routes';
         ShippingMethodTestResultComponent,
         ShippingEligibilityTestResultComponent,
     ],
-    entryComponents: [ZoneSelectorDialogComponent],
     providers: [
         TaxCategoryResolver,
         AdministratorResolver,

packages/admin-ui/src/app/shared/components/action-bar/action-bar.component.ts

@@ -26,6 +26,6 @@ export class ActionBarRightComponent {
     styleUrls: ['./action-bar.component.scss'],
 })
 export class ActionBarComponent {
-    @ContentChild(ActionBarLeftComponent, { static: false }) left: ActionBarLeftComponent;
-    @ContentChild(ActionBarRightComponent, { static: false }) right: ActionBarRightComponent;
+    @ContentChild(ActionBarLeftComponent) left: ActionBarLeftComponent;
+    @ContentChild(ActionBarRightComponent) right: ActionBarRightComponent;
 }

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

@@ -34,7 +34,7 @@ export class CustomFieldControlComponent implements OnInit, AfterViewInit {
     @Input() showLabel = true;
     @Input() readonly = false;
     hasCustomControl = false;
-    @ViewChild('customComponentPlaceholder', { read: ViewContainerRef, static: false })
+    @ViewChild('customComponentPlaceholder', { read: ViewContainerRef })
     private customComponentPlaceholder: ViewContainerRef;
     private customComponentFactory: ComponentFactory<CustomFieldControl> | undefined;
 

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

@@ -68,7 +68,7 @@ export class DatetimePickerComponent implements ControlValueAccessor, AfterViewI
 
     @ViewChild('dropdownComponent', { static: true }) dropdownComponent: DropdownComponent;
     @ViewChild('datetimeInput', { static: true }) datetimeInput: ElementRef<HTMLInputElement>;
-    @ViewChild('calendarTable', { static: false }) calendarTable: ElementRef<HTMLTableElement>;
+    @ViewChild('calendarTable') calendarTable: ElementRef<HTMLTableElement>;
 
     disabled = false;
     calendarView$: Observable<CalendarView>;

packages/admin-ui/src/app/shared/components/extension-host/extension-host.component.ts

@@ -26,7 +26,7 @@ export class ExtensionHostComponent implements OnInit, AfterViewInit, OnDestroy
     extensionWindowIsOpen = false;
     private config: ExtensionHostConfig;
     private extensionWindow?: Window;
-    @ViewChild('extensionFrame', { static: false }) private extensionFrame: ElementRef<HTMLIFrameElement>;
+    @ViewChild('extensionFrame') private extensionFrame: ElementRef<HTMLIFrameElement>;
 
     constructor(
         private route: ActivatedRoute,

packages/admin-ui/src/app/shared/components/items-per-page-controls/items-per-page-controls.component.html

@@ -1,5 +1,5 @@
 <div class="select">
-    <select [value]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
+    <select [ngModel]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
         <option [value]="10">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>
         <option [value]="25">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>
         <option [value]="50">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>

packages/admin-ui/src/app/shared/components/modal-dialog/dialog-buttons.directive.ts

@@ -10,6 +10,7 @@ export class DialogButtonsDirective implements OnInit {
     constructor(private modal: ModalDialogComponent<any>, private templateRef: TemplateRef<any>) {}
 
     ngOnInit() {
-        this.modal.registerButtonsTemplate(this.templateRef);
+        // setTimeout due to https://github.com/angular/angular/issues/15634
+        setTimeout(() => this.modal.registerButtonsTemplate(this.templateRef));
     }
 }

packages/admin-ui/src/app/shared/components/modal-dialog/dialog-title.directive.ts

@@ -10,6 +10,7 @@ export class DialogTitleDirective implements OnInit {
     constructor(private modal: ModalDialogComponent<any>, private templateRef: TemplateRef<any>) {}
 
     ngOnInit() {
-        this.modal.registerTitleTemplate(this.templateRef);
+        // setTimeout due to https://github.com/angular/angular/issues/15634
+        setTimeout(() => this.modal.registerTitleTemplate(this.templateRef));
     }
 }

packages/admin-ui/src/app/shared/directives/disabled.directive.ts

@@ -10,7 +10,7 @@ import { FormControl, FormControlName } from '@angular/forms';
 })
 export class DisabledDirective {
     @Input('vdrDisabled') set disabled(val: boolean) {
-        if (!this.formControlName) {
+        if (!this.formControlName || !this.formControlName.control) {
             return;
         }
         if (val === false) {

packages/admin-ui/src/app/shared/shared.module.ts

@@ -168,12 +168,6 @@ const DECLARATIONS = [
         ModalService,
         CanDeactivateDetailGuard,
     ],
-    entryComponents: [
-        ModalDialogComponent,
-        SimpleDialogComponent,
-        AssetPickerDialogComponent,
-        AssetPreviewDialogComponent,
-    ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class SharedModule {}

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

@@ -1,12 +1,13 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "es2015"
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts",
-    "testing/*.ts"
+    "outDir": "../out-tsc/app"
+},
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ]
 }

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

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "module": "commonjs",
     "types": [
       "jasmine",
       "node"

packages/admin-ui/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "importHelpers": true,
+    "module": "esnext",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,

packages/admin-ui/tslint.json

@@ -3,7 +3,7 @@
     "../../tslint.json"
   ],
   "rulesDirectory": [
-    "../../node_modules/codelyzer"
+    "./node_modules/codelyzer"
   ],
   "rules": {
     "deprecation": {