Update to ng19 and set standalone property for all components (#683)

* chore(ng version): update dev dependencies to ng 19

* chore(ng 19 migration): set `standalone` on every declarable

For ng < 19, we need to keep `standalone: true`.
For ng >= 19, we need `standalone: false` on components, directives, and pipes.

* fix(build): spread expression is always truthy

```ts
const mock: any = { ...template } || {};
```
causes a compiler error.

* chore(ng 19 migration): set `standalone` on every declarable

* chore(schematics): commit schematic build output

* docs(changelog): changelog entries for this PR

* fix(formatting): format change caused by migration

* fix(matchers): fix broken matchers (jest and jasmine)

Matchers were broken by typescript upgrade:

As of TypeScript 5.5, the compiler no longer emits triple-slash directives to
the output files by default. However, there is a way to preserve these
directives in specific cases:

Use `preserve="true"` attribute in your triple-slash directive.

* docs(changelog): add commit references

* docs(changelog): revert unnecessary line

* Revert "docs(changelog): changelog entries for this PR"

This reverts commit 515f484.

package.json

@@ -31,25 +31,25 @@
   },
   "devDependencies": {
     "@angular-builders/jest": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.0.2",
-    "@angular-devkit/schematics": "^18.0.2",
-    "@angular-eslint/builder": "18.0.1",
-    "@angular-eslint/eslint-plugin": "18.0.1",
-    "@angular-eslint/eslint-plugin-template": "18.0.1",
-    "@angular-eslint/schematics": "18.0.1",
-    "@angular-eslint/template-parser": "18.0.1",
-    "@angular/animations": "^18.0.1",
-    "@angular/cdk": "^18.0.1",
-    "@angular/cli": "^18.0.2",
-    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^18.0.1",
-    "@angular/compiler-cli": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
-    "@angular/language-service": "^18.0.1",
-    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/router": "18.0.1",
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular-devkit/schematics": "^19.0.1",
+    "@angular-eslint/builder": "18.4.2",
+    "@angular-eslint/eslint-plugin": "18.4.2",
+    "@angular-eslint/eslint-plugin-template": "18.4.2",
+    "@angular-eslint/schematics": "18.4.2",
+    "@angular-eslint/template-parser": "18.4.2",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/cli": "^19.0.1",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/language-service": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "19.0.0",
     "@commitlint/cli": "17.3.0",
     "@commitlint/config-angular": "17.3.0",
     "@commitlint/config-conventional": "17.3.0",
@@ -76,14 +76,14 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
     "lint-staged": "^13.1.0",
-    "ng-packagr": "18.0.0",
+    "ng-packagr": "19.0.1",
     "prettier": "3.2.5",
     "rxjs": "7.8.1",
     "standard-version": "^9.1.0",
     "ts-node": "10.1.0",
     "tslib": "^2.6.2",
-    "typescript": "5.4.5",
-    "zone.js": "0.14.3"
+    "typescript": "5.6.3",
+    "zone.js": "0.15.0"
   },
   "config": {
     "commitizen": {

projects/spectator/jest/src/lib/mock.ts

@@ -13,7 +13,7 @@ export type SpyObject<T> = BaseSpyObject<T> & {
  * @publicApi
  */
 export function createSpyObject<T>(type: Type<T> | AbstractType<T>, template?: Partial<Record<keyof T, any>>): SpyObject<T> {
-  const mock: any = { ...template } || {};
+  const mock: any = { ...template };
 
   installProtoMethods(mock, type.prototype, () => {
     const jestFn = jest.fn();

projects/spectator/jest/src/public_api.ts

@@ -1,5 +1,5 @@
 /// <reference types="jest" />
-/// <reference path="./lib/matchers-types.ts" />
+/// <reference path="./lib/matchers-types.ts" preserve="true" />
 export * from './lib/dom-selectors';
 export * from './lib/mock';
 export * from './lib/spectator';

projects/spectator/jest/test/auto-focus.directive.spec.ts

@@ -3,7 +3,11 @@ import { createDirectiveFactory, createHostFactory, SpectatorDirective, Spectato
 
 import { AutoFocusDirective } from '../../test/auto-focus/auto-focus.directive';
 
-@Component({ selector: 'custom-host', template: '' })
+@Component({
+  selector: 'custom-host',
+  template: '',
+  standalone: false,
+})
 class CustomHostComponent {
   public isFocused = false;
 }

projects/spectator/jest/test/defer-block.spec.ts

@@ -10,8 +10,8 @@ describe('DeferBlock', () => {
         <button data-test="button--isVisible" (click)="isVisible = !isVisible">Toggle</button>
 
         @defer (when isVisible) {
-        <div>empty defer block</div>
-        } ,
+          <div>empty defer block</div>
+        }
       `,
       standalone: true,
     })
@@ -45,15 +45,16 @@ describe('DeferBlock', () => {
       selector: 'app-root',
       template: `
         @defer (on viewport) {
-        <div>empty defer block</div>
+          <div>empty defer block</div>
         } @placeholder {
-        <div>this is the placeholder text</div>
+          <div>this is the placeholder text</div>
         } @loading {
-        <div>this is the loading text</div>
+          <div>this is the loading text</div>
         } @error {
-        <div>this is the error text</div>
+          <div>this is the error text</div>
         }
       `,
+      standalone: false,
     })
     class DummyComponent {}
 
@@ -112,45 +113,44 @@ describe('DeferBlock', () => {
       selector: 'app-root',
       template: `
         @defer (on viewport) {
-        <div>complete state #1</div>
-
-        <!-- nested defer block -->
-        @defer {
-        <div>complete state #1.1</div>
-
-        <!-- Deep nested defer block #1 -->
-        @defer {
-        <div>complete state #1.1.1</div>
-        } @placeholder {
-        <div>placeholder state #1.1.1</div>
-        }
-        <!-- /Deep nested defer block #1-->
-
-        <!-- Deep nested defer block #2 -->
-        @defer {
-        <div>complete state #1.1.2</div>
-        } @placeholder {
-        <div>placeholder state #1.1.2</div>
-        }
-        <!-- /Deep nested defer block #2-->
-
-        } @placeholder {
-        <div>nested placeholder text</div>
-        } @loading {
-        <div>nested loading text</div>
-        } @error {
-        <div>nested error text</div>
-        }
-        <!-- /nested defer block -->
-
+          <div>complete state #1</div>
+
+          <!-- nested defer block -->
+          @defer {
+            <div>complete state #1.1</div>
+
+            <!-- Deep nested defer block #1 -->
+            @defer {
+              <div>complete state #1.1.1</div>
+            } @placeholder {
+              <div>placeholder state #1.1.1</div>
+            }
+            <!-- /Deep nested defer block #1-->
+
+            <!-- Deep nested defer block #2 -->
+            @defer {
+              <div>complete state #1.1.2</div>
+            } @placeholder {
+              <div>placeholder state #1.1.2</div>
+            }
+            <!-- /Deep nested defer block #2-->
+          } @placeholder {
+            <div>nested placeholder text</div>
+          } @loading {
+            <div>nested loading text</div>
+          } @error {
+            <div>nested error text</div>
+          }
+          <!-- /nested defer block -->
         } @placeholder {
-        <div>placeholder state #1</div>
+          <div>placeholder state #1</div>
         } @loading {
-        <div>loading state #1</div>
+          <div>loading state #1</div>
         } @error {
-        <div>error state #1</div>
+          <div>error state #1</div>
         }
       `,
+      standalone: false,
     })
     class DummyComponent {}
 

projects/spectator/jest/test/fg/fg.component.spec.ts

@@ -4,7 +4,11 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
 import { FgComponent } from '../../../test/fg/fg.component';
 
-@Component({ selector: 'app-custom-host', template: '' })
+@Component({
+  selector: 'app-custom-host',
+  template: '',
+  standalone: false,
+})
 class CustomHostComponent {
   public group = new FormGroup({
     name: new FormControl('name'),

projects/spectator/jest/test/form-select/form-select.component.ts

@@ -10,6 +10,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
     </select>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class FormSelectComponent {
   /**

projects/spectator/jest/test/matchers/matchers.spec.ts

@@ -21,6 +21,7 @@ interface Dummy {
     <custom-element style="visibility: hidden"></custom-element>
     <div id="computed-style"></div>
   `,
+  standalone: false,
 })
 export class MatchersComponent {}
 

projects/spectator/jest/test/override-component.spec.ts

@@ -34,6 +34,7 @@ export class MockStandaloneComponentWithDependency {
 @Component({
   selector: `app-non-standalone`,
   template: `<div id="standalone">Non standalone</div>`,
+  standalone: false,
 })
 export class MockNonStandaloneComponent {
   constructor() {}

projects/spectator/jest/test/override-directive.spec.ts

@@ -15,6 +15,7 @@ export class StandaloneDirectiveWithDependency {
 
 @Directive({
   selector: `app-non-standalone-directive`,
+  standalone: false,
 })
 export class MockNonStandaloneDirective {
   constructor() {}

projects/spectator/jest/test/override-module.spec.ts

@@ -4,12 +4,19 @@ import { createComponentFactory, createDirectiveFactory, createHostFactory } fro
 
 import { AveragePipe } from '../../test/pipe/average.pipe';
 
-@Component({ selector: 'test-comp', template: '<div someDirective>{{ prop | avg }}</div>' })
+@Component({
+  selector: 'test-comp',
+  template: '<div someDirective>{{ prop | avg }}</div>',
+  standalone: false,
+})
 class TestComponent {
   public prop = [1, 2, 3];
 }
 
-@Directive({ selector: '[someDirective]' })
+@Directive({
+  selector: '[someDirective]',
+  standalone: false,
+})
 class SomeDirective {
   @HostBinding('class') public someClass = 'someClass';
 }

projects/spectator/jest/test/override-pipe.spec.ts

@@ -16,6 +16,7 @@ export class StandalonePipe implements PipeTransform {
 
 @Pipe({
   name: `app-non-standalone-pipe`,
+  standalone: false,
 })
 export class MockNonStandalonePipe {
   constructor() {}

projects/spectator/jest/test/override-typesafety.component.spec.ts

@@ -2,7 +2,11 @@ import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Component } from '@angular/core';
 
-@Component({ selector: 'my-component', template: '' })
+@Component({
+  selector: 'my-component',
+  template: '',
+  standalone: false,
+})
 class MyComponent {}
 
 describe('Override type-safety', () => {
@@ -48,7 +52,10 @@ describe('Override type-safety', () => {
   });
 
   describe('Custom Host should not allow custom properties', () => {
-    @Component({ template: '' })
+    @Component({
+      template: '',
+      standalone: false,
+    })
     class CustomHostComponent {
       public foo: string = 'bar';
     }
@@ -78,7 +85,10 @@ describe('Override type-safety', () => {
   });
 
   describe('Custom Host should not allow custom properties (type inference)', () => {
-    @Component({ template: '' })
+    @Component({
+      template: '',
+      standalone: false,
+    })
     class CustomHostComponent {
       public foo: string = 'bar';
     }

projects/spectator/jest/test/teardown/teardown.component.ts

@@ -6,6 +6,7 @@ import { TeardownService } from './teardown.service';
 @Component({
   selector: 'app-teardown',
   template: '',
+  standalone: false,
 })
 export class TeardownComponent implements OnDestroy {
   @Input()

projects/spectator/jest/test/zippy/zippy.component.spec.ts

@@ -120,7 +120,11 @@ describe('ZippyComponent', () => {
   });
 });
 
-@Component({ selector: 'app-custom-host', template: '' })
+@Component({
+  selector: 'app-custom-host',
+  template: '',
+  standalone: false,
+})
 class CustomHostComponent {
   public title = 'Custom HostComponent';
   public options = { color: 'blue' };

projects/spectator/schematics/src/spectator/files/component-custom-host/__name@dasherize__.__type@dasherize__.spec.ts

@@ -3,7 +3,10 @@ import { createHostFactory, SpectatorHost } from '@ngneat/spectator<% if (jest)
 
 import { <%= classify(name)%>Component } from './<%= dasherize(name)%>.component';
 
-@Component({ template: '' })
+@Component({
+    template: '',
+    standalone: false
+})
 class CustomHostComponent {
   title = 'Custom HostComponent';
 }