build(deps): update to angular 19

apps/demo/project.json

@@ -7,17 +7,19 @@
     "tags": [],
     "targets": {
         "build": {
-            "executor": "@angular-devkit/build-angular:browser",
+            "executor": "@angular/build:application",
             "outputs": ["{options.outputPath}"],
             "options": {
-                "outputPath": "dist/apps/demo",
+                "outputPath": {
+                    "base": "dist/apps/demo"
+                },
                 "index": "apps/demo/src/index.html",
-                "main": "apps/demo/src/main.ts",
                 "polyfills": ["zone.js"],
                 "tsConfig": "apps/demo/tsconfig.app.json",
                 "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
                 "styles": ["apps/demo/src/styles.scss"],
-                "scripts": []
+                "scripts": [],
+                "browser": "apps/demo/src/main.ts"
             },
             "configurations": {
                 "production": {
@@ -52,9 +54,7 @@
                     "baseHref": "/angular-extensions/"
                 },
                 "development": {
-                    "buildOptimizer": false,
                     "optimization": false,
-                    "vendorChunk": true,
                     "extractLicenses": false,
                     "sourceMap": true,
                     "namedChunks": true
@@ -63,7 +63,7 @@
             "defaultConfiguration": "production"
         },
         "serve": {
-            "executor": "@angular-devkit/build-angular:dev-server",
+            "executor": "@angular/build:dev-server",
             "configurations": {
                 "production": {
                     "buildTarget": "demo:build:production"
@@ -75,7 +75,7 @@
             "defaultConfiguration": "development"
         },
         "extract-i18n": {
-            "executor": "@angular-devkit/build-angular:extract-i18n",
+            "executor": "@angular/build:extract-i18n",
             "options": {
                 "buildTarget": "demo:build"
             }

apps/demo/src/app/app.component.ts

@@ -7,7 +7,6 @@ import { ColorSchemeSwitchComponent } from './components/color-scheme-switch/col
 import { OldButtonComponent } from './components/old-button/old-button.component';
 
 @Component({
-    standalone: true,
     imports: [RouterModule, ButtonComponent, ColorSchemeSwitchComponent, OldButtonComponent],
     selector: 'demo-root',
     templateUrl: './app.component.html',

apps/demo/src/app/components/button/button.component.ts

@@ -11,7 +11,6 @@ export type ButtonColor = 'red' | 'green' | undefined;
  */
 @Component({
     selector: 'demo-button',
-    standalone: true,
     imports: [CommonModule],
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.scss'],

apps/demo/src/app/components/old-button/old-button.component.ts

@@ -8,7 +8,6 @@ import { Attribute, Component, ElementRef, HostBinding, inject, Input, OnInit, R
  */
 @Component({
     selector: 'demo-old-button',
-    standalone: true,
     imports: [CommonModule],
     templateUrl: './old-button.component.html',
     styleUrls: ['../button/button.component.scss'],

apps/demo/src/test-setup.ts

@@ -1,7 +1,7 @@
 import 'jest-preset-angular/setup-jest';
 import MatchMediaMock from 'jest-matchmedia-mock';
 
-// @ts-ignore https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
 globalThis.ngJest = {
     testEnvironmentOptions: {
         errorOnUnknownElements: true,

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-    projects: getJestProjects()
-};
+export default async () => ({
+    projects: await getJestProjectsAsync()
+});

libs/composables/attribute/src/attribute.composable.spec.ts

@@ -19,9 +19,7 @@ describe('attribute.composable.ts', () => {
                             provide: ElementRef,
                             useValue: {
                                 nativeElement: {
-                                    getAttributeNS: jest
-                                        .fn()
-                                        .mockImplementation(() => initialAssignedValue)
+                                    getAttributeNS: jest.fn().mockImplementation(() => initialAssignedValue)
                                 }
                             }
                         },
@@ -37,10 +35,7 @@ describe('attribute.composable.ts', () => {
             it('should call bindAttribute with the correct arguments', () => {
                 TestBed.runInInjectionContext(() => {
                     // Arrange
-                    const bindAttributeSpy = jest.spyOn(
-                        attributeModule,
-                        'bindAttribute'
-                    );
+                    const bindAttributeSpy = jest.spyOn(attributeModule, 'bindAttribute');
 
                     // Act
                     const value = useAttribute('name', {
@@ -50,15 +45,11 @@ describe('attribute.composable.ts', () => {
                     });
 
                     // Assert
-                    expect(bindAttributeSpy).toHaveBeenCalledWith(
-                        'name',
-                        value,
-                        {
-                            defaultValue: 'bar',
-                            namespace: 'my',
-                            target: inject(ElementRef).nativeElement
-                        }
-                    );
+                    expect(bindAttributeSpy).toHaveBeenCalledWith('name', value, {
+                        defaultValue: 'bar',
+                        namespace: 'my',
+                        target: inject(ElementRef).nativeElement
+                    });
 
                     bindAttributeSpy.mockRestore();
                 });
@@ -89,19 +80,17 @@ describe('attribute.composable.ts', () => {
                 });
 
                 it('the defaultValue, if initialValue is `null`', () => {
-                        TestBed.runInInjectionContext(() => {
-                            // Act
-                            const result = useAttribute('name', {
-                                initialValue: null,
-                                defaultValue: 'bar'
-                            });
-
-                            // Assert
-                            expect(result()).toEqual('bar');
+                    TestBed.runInInjectionContext(() => {
+                        // Act
+                        const result = useAttribute('name', {
+                            initialValue: null,
+                            defaultValue: 'bar'
                         });
-                    }
-                );
 
+                        // Assert
+                        expect(result()).toEqual('bar');
+                    });
+                });
 
                 it('the initial assigned value in the DOM if no initialValue has been defined', () => {
                     TestBed.runInInjectionContext(() => {
@@ -147,6 +136,7 @@ describe('attribute.composable.ts', () => {
             }
 
             @Component({
+                imports: [TestButtonComponent],
                 template: `
                     <button #buttonA bxTestButton role="menuitem"></button>
                     <button #buttonB bxTestButton type="submit"></button>
@@ -165,7 +155,7 @@ describe('attribute.composable.ts', () => {
 
             beforeEach(async () => {
                 await TestBed.configureTestingModule({
-                    declarations: [ ParentComponent, TestButtonComponent ]
+                    imports: [ParentComponent, TestButtonComponent]
                 }).compileComponents();
 
                 fixture = TestBed.createComponent(ParentComponent);
@@ -181,9 +171,7 @@ describe('attribute.composable.ts', () => {
 
                 it('should fall back to default value, when the value is set to `undefined`', () => {
                     // Arrange
-                    const buttonADebug = fixture.debugElement.queryAll(
-                        By.directive(TestButtonComponent)
-                    )[0];
+                    const buttonADebug = fixture.debugElement.queryAll(By.directive(TestButtonComponent))[0];
 
                     // Act
                     component.buttonA.type.set(undefined);
@@ -195,9 +183,7 @@ describe('attribute.composable.ts', () => {
 
                 it('should not fall back to default value, when the value is set to `null`', () => {
                     // Arrange
-                    const buttonADebug = fixture.debugElement.queryAll(
-                        By.directive(TestButtonComponent)
-                    )[0];
+                    const buttonADebug = fixture.debugElement.queryAll(By.directive(TestButtonComponent))[0];
 
                     // Act
                     component.buttonA.type.set(null);
@@ -217,18 +203,14 @@ describe('attribute.composable.ts', () => {
             describe('when a namespace has been defined', () => {
                 it('should set the attribute with the namespace', () => {
                     // Arrange
-                    const buttonADebug = fixture.debugElement.queryAll(
-                        By.directive(TestButtonComponent)
-                    )[0];
+                    const buttonADebug = fixture.debugElement.queryAll(By.directive(TestButtonComponent))[0];
 
                     // Act
                     component.buttonA.label.set('Button A');
                     fixture.detectChanges();
 
                     // Assert
-                    expect(buttonADebug.attributes['bx:label']).toEqual(
-                        'Button A'
-                    );
+                    expect(buttonADebug.attributes['bx:label']).toEqual('Button A');
                 });
             });
         });
@@ -287,7 +269,7 @@ describe('attribute.composable.ts', () => {
 
             beforeEach(async () => {
                 await TestBed.configureTestingModule({
-                    declarations: [ TestComponent ]
+                    imports: [TestComponent]
                 }).compileComponents();
 
                 fixture = TestBed.createComponent(TestComponent);
@@ -305,32 +287,26 @@ describe('attribute.composable.ts', () => {
             });
 
             it('should set a namespaced attribute correctly', () => {
-                expect(fixture.debugElement.attributes['my:title']).toEqual(
-                    'Hello'
-                );
+                expect(fixture.debugElement.attributes['my:title']).toEqual('Hello');
             });
 
-            it.each([ null, undefined ])(
-                'should remove the attribute, when setting the signal\'s value to %s',
+            it.each([null, undefined])(
+                "should remove the attribute, when setting the signal's value to %s",
                 (value) => {
                     component.name.set(value);
 
                     fixture.detectChanges();
 
-                    expect(
-                        fixture.debugElement.attributes['name']
-                    ).toBeUndefined();
+                    expect(fixture.debugElement.attributes['name']).toBeUndefined();
                 }
             );
 
-            it('should change the attribute, when the signal\'s value changes', () => {
+            it("should change the attribute, when the signal's value changes", () => {
                 component.role.set('button');
 
                 fixture.detectChanges();
 
-                expect(fixture.debugElement.attributes['role']).toEqual(
-                    'button'
-                );
+                expect(fixture.debugElement.attributes['role']).toEqual('button');
             });
 
             it('should bind the attribute on the custom target', () => {

libs/composables/attribute/src/boolean-attribute.composable.spec.ts

@@ -22,7 +22,7 @@ describe('useBooleanAttribute', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ TestComponent ]
+            imports: [TestComponent]
         }).compileComponents();
 
         fixture = TestBed.createComponent(TestComponent);
@@ -51,15 +51,15 @@ describe('useBooleanAttribute', () => {
         expect(fixture.debugElement.attributes['my:editable']).toEqual('');
     });
 
-    it('should remove the attribute, when setting the signal\'s value to `false`', () => {
+    it("should remove the attribute, when setting the signal's value to `false`", () => {
         component.loading.set(false);
 
         fixture.detectChanges();
 
         expect(fixture.debugElement.attributes['loading']).toBeUndefined();
     });
 
-    it('should set the attribute, when setting the signal\'s value to `true`', () => {
+    it("should set the attribute, when setting the signal's value to `true`", () => {
         component.disabled.set(true);
 
         fixture.detectChanges();

libs/composables/class/src/class.composable.spec.ts

@@ -17,7 +17,7 @@ describe('useClass', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ TestComponent ]
+            imports: [TestComponent]
         }).compileComponents();
 
         fixture = TestBed.createComponent(TestComponent);
@@ -34,15 +34,15 @@ describe('useClass', () => {
         expect(fixture.debugElement.classes['highlighted']).toBeTruthy();
     });
 
-    it('should add the class, when setting the signal\'s value to `true`', () => {
+    it("should add the class, when setting the signal's value to `true`", () => {
         component.test.set(false);
 
         fixture.detectChanges();
 
         expect(fixture.debugElement.classes['test']).toBeFalsy();
     });
 
-    it('should remove the class, when setting the signal\'s value to `false`', () => {
+    it("should remove the class, when setting the signal's value to `false`", () => {
         component.highlighted.set(false);
 
         fixture.detectChanges();

libs/composables/class/src/classes.composable.spec.ts

@@ -7,7 +7,7 @@ import { useClasses } from './classes.composable';
     template: ''
 })
 class TestComponent {
-    readonly classes = useClasses([ 'test', 'test2' ]);
+    readonly classes = useClasses(['test', 'test2']);
 }
 
 describe('useClasses', () => {
@@ -16,7 +16,7 @@ describe('useClasses', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ TestComponent ]
+            imports: [TestComponent]
         }).compileComponents();
 
         fixture = TestBed.createComponent(TestComponent);
@@ -36,8 +36,8 @@ describe('useClasses', () => {
         });
     });
 
-    it('should remove the previous classes and add new classes, when changing the signal\'s value', () => {
-        component.classes.set([ 'foo', 'bar' ]);
+    it("should remove the previous classes and add new classes, when changing the signal's value", () => {
+        component.classes.set(['foo', 'bar']);
 
         fixture.detectChanges();