chore(admin-ui): Update to Angular v11

packages/admin-ui/angular.json

@@ -61,7 +61,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": true,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -163,7 +162,7 @@
       "prefix": "vdr",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "./tsconfig.lib.json",
             "project": "./src/lib/ng-package.json"

packages/admin-ui/package.json

@@ -18,15 +18,15 @@
     "directory": "package"
   },
   "dependencies": {
-    "@angular/animations": "10.1.4",
+    "@angular/animations": "11.2.4",
     "@angular/cdk": "10.2.4",
-    "@angular/common": "10.1.4",
-    "@angular/core": "10.1.4",
-    "@angular/forms": "10.1.4",
-    "@angular/language-service": "10.1.4",
-    "@angular/platform-browser": "10.1.4",
-    "@angular/platform-browser-dynamic": "10.1.4",
-    "@angular/router": "10.1.4",
+    "@angular/common": "11.2.4",
+    "@angular/core": "11.2.4",
+    "@angular/forms": "11.2.4",
+    "@angular/language-service": "11.2.4",
+    "@angular/platform-browser": "11.2.4",
+    "@angular/platform-browser-dynamic": "11.2.4",
+    "@angular/router": "11.2.4",
     "@apollo/client": "^3.0.0",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@clr/angular": "^4.0.8",
@@ -61,35 +61,34 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1001.4",
-    "@angular-devkit/build-ng-packagr": "~0.1001.4",
-    "@angular/cli": "^10.1.4",
-    "@angular/compiler": "^10.1.4",
-    "@angular/compiler-cli": "^10.1.4",
+    "@angular-devkit/build-angular": "~0.1102.3",
+    "@angular/cli": "^11.2.3",
+    "@angular/compiler": "^11.2.4",
+    "@angular/compiler-cli": "^11.2.4",
     "@biesbjerg/ngx-translate-extract": "^6.0.3",
-    "@types/jasmine": "~3.5.10",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.6",
     "@types/node": "^12.11.1",
     "@types/prosemirror-commands": "^1.0.3",
     "@types/prosemirror-menu": "^1.0.2",
     "@types/prosemirror-state": "^1.2.5",
     "@types/prosemirror-view": "1.15.1",
-    "codelyzer": "^5.2.2",
+    "codelyzer": "^6.0.0",
     "cross-spawn": "^7.0.3",
     "fs-extra": "^9.0.0",
-    "jasmine-core": "~3.5.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.1.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^11.2.4",
     "protractor": "~7.0.0",
     "puppeteer": "^2.1.1",
     "rimraf": "^3.0.0",
     "tslint": "~6.1.0",
     "typescript": "4.0.3"
   }
-}
+}

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

@@ -6,7 +6,10 @@ import { routes } from './app.routes';
 
 @NgModule({
     declarations: [],
-    imports: [AppComponentModule, RouterModule.forRoot(routes, { useHash: false })],
+    imports: [
+        AppComponentModule,
+        RouterModule.forRoot(routes, { useHash: false, relativeLinkResolution: 'legacy' }),
+    ],
     providers: [],
     bootstrap: [AppComponent],
 })

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts

@@ -202,7 +202,6 @@ export class ProductDetailComponent
                 .createUrlTree(['./', { ...this.route.snapshot.params, tab: tabName }], {
                     queryParamsHandling: 'merge',
                     relativeTo: this.route,
-                    replaceUrl: true,
                 })
                 .toString(),
         );

packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component, Injectable } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { Type } from '@vendure/common/lib/shared-types';
@@ -13,19 +13,21 @@ import { AffixedInputComponent } from '../affixed-input/affixed-input.component'
 import { CurrencyInputComponent } from './currency-input.component';
 
 describe('CurrencyInputComponent', () => {
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [FormsModule],
-            providers: [{ provide: DataService, useClass: MockDataService }],
-            declarations: [
-                TestControlValueAccessorComponent,
-                TestSimpleComponent,
-                CurrencyInputComponent,
-                AffixedInputComponent,
-                LocaleCurrencyNamePipe,
-            ],
-        }).compileComponents();
-    }));
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                imports: [FormsModule],
+                providers: [{ provide: DataService, useClass: MockDataService }],
+                declarations: [
+                    TestControlValueAccessorComponent,
+                    TestSimpleComponent,
+                    CurrencyInputComponent,
+                    AffixedInputComponent,
+                    LocaleCurrencyNamePipe,
+                ],
+            }).compileComponents();
+        }),
+    );
 
     it('should display the price as decimal with a simple binding', fakeAsync(() => {
         const fixture = createAndRunChangeDetection(TestSimpleComponent);

packages/admin-ui/src/lib/core/src/shared/components/data-table/data-table.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NgxPaginationModule } from 'ngx-pagination';
 
 import { TestingCommonModule } from '../../../../../../testing/testing-common.module';
@@ -13,18 +13,20 @@ describe('DataTableComponent', () => {
     let component: DataTableComponent<any>;
     let fixture: ComponentFixture<DataTableComponent<any>>;
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [NgxPaginationModule, TestingCommonModule],
-            declarations: [
-                DataTableComponent,
-                DataTableColumnComponent,
-                PaginationControlsComponent,
-                ItemsPerPageControlsComponent,
-                SelectToggleComponent,
-            ],
-        }).compileComponents();
-    }));
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                imports: [NgxPaginationModule, TestingCommonModule],
+                declarations: [
+                    DataTableComponent,
+                    DataTableColumnComponent,
+                    PaginationControlsComponent,
+                    ItemsPerPageControlsComponent,
+                    SelectToggleComponent,
+                ],
+            }).compileComponents();
+        }),
+    );
 
     beforeEach(() => {
         fixture = TestBed.createComponent(DataTableComponent);

packages/admin-ui/tsconfig.lib.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
+    "declarationMap": true,
     "target": "es2015",
     "declaration": true,
     "inlineSources": true,

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

@@ -1,5 +1,8 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false,
     "skipTemplateCodegen": true,