feat(chore): Angular 12 (#UIM-757) (#694)

* fix: prepare for update

* updated to angular 12

* added linter fix for secondary-entry-points-migration

* fixed build

* fixed linter errors

* fixed linter errors

* returned Ctor

* fixed wallaby config and some tests

* fixed tests and linter

* fixed tests

* updated @angular-devkit/architect-cli

* updated yarn.lock

* cleared configuration

* fixed build

* fixed tests

Author: lskramarov

angular.json

@@ -6,7 +6,10 @@
 #   npx browserslist
 
 > 0.5%
-last 2 versions
+last 2 Chrome version
+last 2 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
 Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

packages/docs/browserslist renamed to browserslist

@@ -36,12 +36,11 @@ On top of automated testing, we should also be manually testing our examples on
   * Chrome
   * Firefox
   * Edge
-  * IE11
 * Mac
   * Chrome
   * Firefox
   * Safari
 
 ## Review
 
-* Ensure a core maintainer is added to the review.
+* Ensure a core maintainer is added to the review.

docs/guides/01-contribution-checklist.md

@@ -15,29 +15,29 @@
     },
     "requiredAngularVersion": ">=11.0.0",
     "dependencies": {
-        "@angular/animations": "^11.2.4",
+        "@angular/animations": "^12.2.5",
         "@angular/cdk": "^11.2.2",
-        "@angular/common": "^11.2.4",
-        "@angular/compiler": "^11.2.4",
-        "@angular/core": "^11.2.4",
-        "@angular/forms": "^11.2.4",
-        "@angular/platform-browser": "^11.2.4",
+        "@angular/common": "^12.2.5",
+        "@angular/compiler": "^12.2.5",
+        "@angular/core": "^12.2.5",
+        "@angular/forms": "^12.2.5",
+        "@angular/platform-browser": "^12.2.5",
         "@ptsecurity/mosaic-icons": "^5.3.0",
         "core-js": "^3.6.5",
         "rxjs": "^6.5.5",
         "tslib": "^2.0.0",
-        "zone.js": "~0.10.3"
+        "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/architect-cli": "^0.1102.14",
-        "@angular-devkit/build-angular": "^0.1102.13",
-        "@angular-devkit/core": "^11.2.3",
-        "@angular-devkit/schematics": "^11.2.3",
-        "@angular/cli": "^11.2.3",
-        "@angular/compiler-cli": "^11.2.4",
-        "@angular/platform-browser-dynamic": "^11.2.4",
-        "@angular/platform-server": "^11.2.4",
-        "@angular/router": "^11.2.4",
+        "@angular-devkit/architect-cli": "^0.1202.6",
+        "@angular-devkit/build-angular": "^12.2.5",
+        "@angular-devkit/core": "^12.2.5",
+        "@angular-devkit/schematics": "^12.2.5",
+        "@angular/cli": "^12.2.5",
+        "@angular/compiler-cli": "^12.2.5",
+        "@angular/platform-browser-dynamic": "^12.2.5",
+        "@angular/platform-server": "^12.2.5",
+        "@angular/router": "^12.2.5",
         "@commitlint/cli": "9.1.2",
         "@commitlint/config-conventional": "^7.5.0",
         "@octokit/rest": "^18.9.1",
@@ -77,7 +77,7 @@
         "inquirer": "^7.3.3",
         "jasmine": "^3.5.0",
         "jasmine-core": "^3.5.0",
-        "karma": "^5.1.1",
+        "karma": "^6.3.4",
         "karma-chrome-launcher": "^3.1.0",
         "karma-coverage": "^2.0.3",
         "karma-jasmine": "^3.1.1",
@@ -91,10 +91,10 @@
         "merge2": "^1.2.3",
         "messageformat": "^2.0.5",
         "moment": "~2.23.0",
-        "ng-packagr": "^11.2.4",
+        "ng-packagr": "^12.2.1",
         "request": "^2.88.0",
         "resolve-bin": "^0.4.0",
-        "sass": "^1.32.6",
+        "sass": "^1.39.2",
         "scss-bundle": "^3.1.1",
         "snyk": "^1.667.0",
         "spdx-satisfies": "^5.0.0",
@@ -106,7 +106,7 @@
         "tsconfig-paths": "^3.9.0",
         "tsickle": "^0.39.1",
         "tslint": "^6.1.3",
-        "typescript": "~4.0.3",
+        "typescript": "~4.3.5",
         "wallaby-webpack": "^3.9.13",
         "yaml-lint": "^1.2.4"
     },
@@ -139,7 +139,7 @@
         "docs:start:dev": "ng serve --configuration=development mosaic-docs",
         "docs:start:prod": "ng serve --configuration=production mosaic-docs",
         "docs:prod-build": "ng build mosaic-docs",
-        "docs:prod-build:aot": "ng build mosaic-docs --prod",
+        "docs:prod-build:aot": "ng build mosaic-docs --configuration production",
         "docs:publish-preview": "ts-node --project ./scripts/tsconfig.deploy.json ./scripts/deploy/publish-docs-preview.ts",
         "docs:cleanup-preview": "ts-node --project ./scripts/tsconfig.deploy.json ./scripts/deploy/cleanup-preview.ts",
         "preinstall": "node tools/npm/check-npm.js",

package.json

@@ -1,6 +1,6 @@
 /* tslint:disable */
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import { getTestBed } from '@angular/core/testing';
 import {

packages/cdk/test.ts

@@ -15,6 +15,6 @@
         "flatModuleId": "@ptsecurity/cdk",
         "skipTemplateCodegen": true,
         "fullTemplateTypeCheck": true,
-        "enableIvy": false
+        "compilationMode": "partial"
     }
 }

packages/cdk/tsconfig.json

@@ -32,16 +32,16 @@ export class AnchorsComponent {
     readonly isSmoothScrollSupported;
     noSmoothScrollDebounce = 10;
     debounceTime: number = 15;
+    activeClass = 'anchors-menu__list-element_active';
+    pathName: string;
+    fragment = '';
     private destroyed: Subject<boolean> = new Subject();
-    private fragment = '';
-    private activeClass = 'anchors-menu__list-element_active';
     private scrollContainer: any;
     private currentUrl: any;
-    private pathName: string;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
-                private element: ElementRef,
+                public element: ElementRef,
                 private ref: ChangeDetectorRef,
                 @Inject(DOCUMENT) private document: Document) {
         this.isSmoothScrollSupported  = 'scrollBehavior' in this.document.documentElement.style;
@@ -69,7 +69,7 @@ export class AnchorsComponent {
     ngOnInit() {
         // attached to anchor's change in the address bar manually or by clicking on the anchor
         this.route.fragment.pipe(takeUntil(this.destroyed)).subscribe((fragment) => {
-            this.fragment = fragment;
+            this.fragment = fragment as string;
             const index = this.getAnchorIndex(fragment);
 
             if (index) { this.setFragment(index); }
@@ -140,7 +140,7 @@ export class AnchorsComponent {
     }
 
     private createAnchors(): IAnchor[] {
-        const anchors = [];
+        const anchors: any = [];
         const headers: HTMLElement[] = Array.from(this.document.querySelectorAll(this.headerSelectors));
 
         if (headers.length) {

packages/docs/src/app/components/anchors/anchors.component.ts

@@ -20,18 +20,21 @@ export class ComponentViewerComponent implements OnDestroy {
 
     private destroyed: Subject<boolean> = new Subject();
 
-    constructor(routeActivated: ActivatedRoute,
-                public docItems: DocumentationItems
+    constructor(
+        routeActivated: ActivatedRoute,
+        public docItems: DocumentationItems
     ) {
         // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
         // parent route for the section (mosaic/cdk).
 
-        combineLatest([routeActivated.params, routeActivated.parent.params]).pipe(
-            map((p: [Params, Params]) => ({id: p[0].id, section: p[1].section})),
-            map((p) => ({doc: docItems.getItemById(p.id, p.section), section: p.section}),
+        combineLatest([routeActivated.params, routeActivated!.parent!.params]).pipe(
+            map((p: [Params, Params]) => ({ id: p[0].id, section: p[1].section })),
+            map((p) => ({ doc: docItems.getItemById(p.id, p.section), section: p.section }),
                 takeUntil(this.destroyed))
         ).subscribe((d) => {
-            this.componentDocItem = d.doc;
+            if (d.doc) {
+                this.componentDocItem = d.doc;
+            }
         });
     }
 
@@ -137,11 +140,17 @@ export class ComponentOverviewComponent implements OnDestroy {
 
     copyCode = (event: Event) =>  {
         const codeCopyAnimationTime = 1000;
-        const copyBlock = (<HTMLElement> event.target).parentElement.parentElement;
+        const copyBlock = (<HTMLElement> event.target)!.parentElement!.parentElement;
+
+        if (!copyBlock) { return; }
 
         const range = document.createRange();
         range.selectNodeContents(copyBlock);
+
         const sel = window.getSelection();
+
+        if (!sel) { return; }
+
         sel.removeAllRanges();
         sel.addRange(range);
         document.execCommand('copy');

packages/docs/src/app/components/component-viewer/component-viewer.component.ts

@@ -7,14 +7,16 @@ import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
     styleUrls: ['./main-layout.component.scss']
 })
 export class MainLayoutComponent {
-    nextRoute: string = '';
+    nextRoute: string | null = '';
     extras: NavigationExtras = {
         preserveFragment: true,
         queryParamsHandling: 'preserve'
     };
 
-    constructor(private router: Router,
-                private route: ActivatedRoute) {
+    constructor(
+        private router: Router,
+        public route: ActivatedRoute
+    ) {
         const href = location.href;
 
         if (href.match('github')) {

packages/docs/src/app/components/main-layout/main-layout.component.ts

@@ -28,12 +28,12 @@ export class NavbarProperty {
     setValue(i: number) {
         this.currentValue = this.data[i];
         localStorage.setItem(this.property, `${i}`);
-        if (this.updateTemplate) { this.updateTemplate(i); }
+        if (this.updateTemplate) { this.updateTemplate(); }
         if (this.updateSelected) { this.updateSelected(i); }
     }
 
     init() {
-        const currentValue = +localStorage.getItem(this.property);
+        const currentValue = parseInt(localStorage.getItem(this.property) as string);
 
         if (currentValue) {
             this.setValue(currentValue);
@@ -42,7 +42,7 @@ export class NavbarProperty {
         }
     }
 
-    private updateTemplate(i: number) {
+    private updateTemplate() {
         if (this.currentValue) {
             for (const color of this.data) {
                 document.body.classList.remove(color.className);