feat: upgrade to Angular 15

.gitignore

@@ -43,6 +43,7 @@ testem.log
 .DS_Store
 Thumbs.db
 
+migrations.json
 apps/demo/routesFile.txt
 .ssl
 .angular

apps/demo/src/app/app.routes.ts

@@ -121,7 +121,6 @@ export const appRoutes: Routes = [
     imports: [
         RouterModule.forRoot(appRoutes, {
             initialNavigation: 'enabledBlocking',
-            relativeLinkResolution: 'corrected',
             scrollPositionRestoration: `enabled`,
         }),
     ],

apps/demo/src/app/pages/canvas/canvas-page.component.ts

@@ -23,7 +23,7 @@ export class CanvasPageComponent {
     dWidth = 100;
     dHeight = 100;
 
-    globalCompositeOperation = 'source-over';
+    globalCompositeOperation: GlobalCompositeOperation = 'source-over';
 
     mouth = 30;
     blur = 0;

libs/audio/karma.conf.js

@@ -9,8 +9,8 @@ module.exports = function (config) {
             require('karma-jasmine'),
             require('karma-chrome-launcher'),
             require('karma-jasmine-html-reporter'),
-            require('karma-coverage-istanbul-reporter'),
             require('@angular-devkit/build-angular/plugins/karma'),
+            require('karma-coverage'),
         ],
         files: [
             {
@@ -31,10 +31,12 @@ module.exports = function (config) {
         client: {
             clearContext: false, // leave Jasmine Spec Runner output visible in browser
         },
-        coverageIstanbulReporter: {
-            dir: require('path').join(__dirname, '../../coverage/audio'),
-            reports: ['html', 'lcovonly'],
-            fixWebpackSourcePaths: true,
+        preprocessors: {
+            'src/**/*.js': ['coverage'],
+        },
+        coverageReporter: {
+            type: 'html',
+            dir: require('path').join(__dirname, '../../coverage/payment-request'),
         },
         reporters: ['progress', 'kjhtml'],
         port: 9876,

libs/audio/src/decorators/audio-param.ts

@@ -13,6 +13,7 @@ export function audioParam<K extends string>(
 ): AudioParamDecorator<K> | AudioParamWorkletDecorator {
     const decorator: AudioParamDecorator<K> = (target, propertyKey) => {
         Object.defineProperty(target, propertyKey, {
+            configurable: true,
             set(this: AudioNodeWithParams<K> | AudioWorkletNode, value: AudioParamInput) {
                 value = typeof value === 'string' ? Number.parseFloat(value) : value;
 
@@ -27,7 +28,10 @@ export function audioParam<K extends string>(
                     processAudioParam(audioParam, value, this.context.currentTime);
                 } else {
                     // Fallback for older browsers
-                    Object.defineProperty(target, propertyKey, {value});
+                    Object.defineProperty(target, propertyKey, {
+                        value,
+                        configurable: true,
+                    });
                 }
             },
         });

libs/audio/test.ts

@@ -1,24 +1,13 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
-import './src/polyfill.js';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
-// First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-
-// And load the modules.
-context.keys().map(context);

libs/audio/tests/audio-buffer.service.spec.ts

@@ -9,7 +9,7 @@ describe('AudioBufferService', () => {
     });
 
     beforeEach(() => {
-        service = TestBed.get(AudioBufferService);
+        service = TestBed.inject(AudioBufferService);
     });
 
     it('turns audio file to AudioBuffer', done => {

libs/audio/tests/audio-worklet-processors-ready.spec.ts

@@ -19,7 +19,7 @@ describe('AUDIO_WORKLET_PROCESSORS_READY', () => {
     xit('rejects Promise if worklets are not supported', done => {
         let rejected = false;
 
-        TestBed.get(AUDIO_WORKLET_PROCESSORS_READY).catch(() => {
+        TestBed.inject(AUDIO_WORKLET_PROCESSORS_READY).catch(() => {
             rejected = true;
         });
 

libs/canvas/karma.conf.js

@@ -9,16 +9,18 @@ module.exports = function (config) {
             require('karma-jasmine'),
             require('karma-chrome-launcher'),
             require('karma-jasmine-html-reporter'),
-            require('karma-coverage-istanbul-reporter'),
             require('@angular-devkit/build-angular/plugins/karma'),
+            require('karma-coverage'),
         ],
         client: {
             clearContext: false, // leave Jasmine Spec Runner output visible in browser
         },
-        coverageIstanbulReporter: {
-            dir: require('path').join(__dirname, '../../coverage/canvas'),
-            reports: ['html', 'lcovonly'],
-            fixWebpackSourcePaths: true,
+        preprocessors: {
+            'src/**/*.js': ['coverage'],
+        },
+        coverageReporter: {
+            type: 'html',
+            dir: require('path').join(__dirname, '../../coverage/payment-request'),
         },
         reporters: ['progress', 'kjhtml'],
         port: 9876,

libs/canvas/src/contexts/canvas-2d.ts

@@ -3,35 +3,30 @@ import {CanvasMethod} from '../interfaces/canvas-method';
 import {DrawService} from '../services/draw.service';
 import {CANVAS_2D_CONTEXT} from '../tokens/canvas-2d-context';
 
-// TODO remove default values once https://github.com/angular/angular/issues/36479 is fixed
-export function canvasContextFactory(
-    {nativeElement}: ElementRef<HTMLCanvasElement>,
-    opaque: string | null = nativeElement.getAttribute('waOpaque'),
-    desynchronized: string | null = nativeElement.getAttribute('waDesynchronized'),
-): CanvasRenderingContext2D {
-    const context = nativeElement.getContext('2d', {
-        alpha: opaque === null,
-        desynchronized: desynchronized !== null,
-    });
-
-    if (!context) {
-        throw new Error('Context of different type was already requested');
-    }
-
-    return context as CanvasRenderingContext2D;
-}
-
 @Directive({
     selector: 'canvas[waCanvas2d]',
     providers: [
         {
             provide: CANVAS_2D_CONTEXT,
-            deps: [
-                ElementRef,
-                // [new Attribute('waOpaque')],
-                // [new Attribute('waDesynchronized')],
-            ],
-            useFactory: canvasContextFactory,
+            deps: [ElementRef],
+            useFactory: (
+                {nativeElement}: ElementRef<HTMLCanvasElement>,
+                opaque: string | null = nativeElement.getAttribute('waOpaque'),
+                desynchronized: string | null = nativeElement.getAttribute(
+                    'waDesynchronized',
+                ),
+            ): CanvasRenderingContext2D => {
+                const context = nativeElement.getContext('2d', {
+                    alpha: opaque === null,
+                    desynchronized: desynchronized !== null,
+                });
+
+                if (!context) {
+                    throw new Error('Context of different type was already requested');
+                }
+
+                return context as CanvasRenderingContext2D;
+            },
         },
         DrawService,
     ],

libs/canvas/src/properties/compositing.ts

@@ -14,7 +14,7 @@ export class CompositingDirective implements CanvasMethod, CanvasCompositing {
     globalAlpha = 1;
 
     @Input()
-    globalCompositeOperation = 'source-over';
+    globalCompositeOperation: GlobalCompositeOperation = 'source-over';
 
     call(context: CanvasRenderingContext2D) {
         context.globalAlpha = this.globalAlpha;

libs/canvas/src/properties/text-drawing-styles.ts

@@ -17,6 +17,9 @@ export class TextDrawingStylesDirective implements CanvasMethod, CanvasTextDrawi
     @Input()
     textAlign: CanvasTextAlign = 'start';
 
+    @Input()
+    fontKerning: CanvasFontKerning = 'auto';
+
     @Input()
     textBaseline: CanvasTextBaseline = 'alphabetic';
 

libs/canvas/test.ts

@@ -1,23 +1,13 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-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 {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
-// First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-
-// And load the modules.
-context.keys().map(context);

libs/canvas/tests/canvas-2d.spec.ts

@@ -1,8 +1,7 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {CanvasModule} from '../src/module';
 import {CANVAS_2D_CONTEXT} from '../src/tokens/canvas-2d-context';
-import {canvasContextFactory} from '../src/contexts/canvas-2d';
 
 describe('Canvas2dDirective', () => {
     @Component({
@@ -52,15 +51,6 @@ describe('Canvas2dDirective', () => {
         fixture.destroy();
     });
 
-    it('factory throws if different context was already requested', () => {
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('webgl');
-
-        expect(context).toBeTruthy();
-
-        expect(() => canvasContextFactory(new ElementRef(canvas), null, null)).toThrow();
-    });
-
     it('creates context', () => {
         expect(testComponent.context instanceof CanvasRenderingContext2D).toBe(true);
     });

libs/canvas/tests/canvas-properties.spec.ts

@@ -3,6 +3,6 @@ import {CANVAS_PROPERTIES} from '../src/tokens/canvas-properties';
 
 describe('CANVAS_PROPERTIES', () => {
     it('is empty by default', () => {
-        expect(TestBed.get(CANVAS_PROPERTIES)).toEqual([]);
+        expect(TestBed.inject(CANVAS_PROPERTIES)).toEqual([]);
     });
 });

libs/common/karma.conf.js

@@ -9,16 +9,18 @@ module.exports = function (config) {
             require('karma-jasmine'),
             require('karma-chrome-launcher'),
             require('karma-jasmine-html-reporter'),
-            require('karma-coverage-istanbul-reporter'),
             require('@angular-devkit/build-angular/plugins/karma'),
+            require('karma-coverage'),
         ],
         client: {
             clearContext: false, // leave Jasmine Spec Runner output visible in browser
         },
-        coverageIstanbulReporter: {
-            dir: require('path').join(__dirname, '../../coverage/common'),
-            reports: ['html', 'lcovonly'],
-            fixWebpackSourcePaths: true,
+        preprocessors: {
+            'src/**/*.js': ['coverage'],
+        },
+        coverageReporter: {
+            type: 'html',
+            dir: require('path').join(__dirname, '../../coverage/payment-request'),
         },
         reporters: ['progress', 'kjhtml'],
         port: 9876,

libs/common/src/tokens/css.ts

@@ -2,19 +2,22 @@ import {inject, InjectionToken} from '@angular/core';
 
 import {WINDOW} from './window';
 
-/**
- * Use Window['CSS'], this is a workaround to support Angular 6+
- */
-interface Css {
-    escape(ident: string): string;
-    supports(property: string, value: string): boolean;
-    supports(conditionText: string): boolean;
+declare global {
+    interface Window {
+        CSS: typeof CSS;
+    }
 }
 
-export const CSS = new InjectionToken<Css>('An abstraction over window.CSS object', {
-    factory: () =>
-        (inject(WINDOW) as any).CSS || {
-            escape: v => v,
-            supports: () => false,
-        },
-});
+const TOKEN_CSS = new InjectionToken<typeof CSS>(
+    'An abstraction over window.CSS object',
+    {
+        factory: () =>
+            inject(WINDOW).CSS ??
+            ({
+                escape: v => v,
+                supports: () => false,
+            } as typeof CSS),
+    },
+);
+
+export {TOKEN_CSS as CSS};

libs/common/test.ts

@@ -1,23 +1,13 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-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 {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
-// First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-
-// And load the modules.
-context.keys().map(context);

libs/common/tests/animation-frame.spec.ts

@@ -9,7 +9,7 @@ describe('ANIMATION_FRAME', () => {
         TestBed.configureTestingModule({});
 
         const animationFrame$: Observable<DOMHighResTimeStamp> =
-            TestBed.get(ANIMATION_FRAME);
+            TestBed.inject(ANIMATION_FRAME);
 
         animationFrame$.pipe(first()).subscribe(timestamp => {
             expect(typeof timestamp).toBe('number');

libs/common/tests/caches.spec.ts

@@ -6,6 +6,6 @@ describe('CACHES', () => {
     it('injects window.caches object', () => {
         TestBed.configureTestingModule({});
 
-        expect(TestBed.get(CACHES)).toBe(window.caches);
+        expect(TestBed.inject(CACHES)).toBe(window.caches);
     });
 });

libs/common/tests/crypto.spec.ts

@@ -6,6 +6,6 @@ describe('CRYPTO', () => {
     it('injects window.crypto object', () => {
         TestBed.configureTestingModule({});
 
-        expect(TestBed.get(CRYPTO)).toBe(window.crypto);
+        expect(TestBed.inject(CRYPTO)).toBe(window.crypto);
     });
 });