feat: add support for v19

README.md

@@ -47,6 +47,14 @@ Check [the documentation](https://ngxtension.netlify.app/).
 
 <!-- UTILITIES:END -->
 
+## Supported Versions
+
+| `Angular` version | `ngxtension` version |
+|-------------------|----------------------|
+| 16.x.x            | 0.0.1                |
+| 16.x.x - 18.x.x   | 1.0.0 - 4.2.0        |
+| 19.x.x            | 5.0.0                |
+
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

apps/test-app/src/app/active-element/active-element.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import { injectActiveElement } from 'ngxtension/active-element';
 
 @Component({
-	standalone: true,
 	host: {
 		style: 'display: block; margin: 12px',
 	},

apps/test-app/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
-	standalone: true,
 	imports: [RouterLink, RouterOutlet],
 	selector: 'ngxtension-platform-root',
 	template: `
@@ -61,7 +60,6 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 		<hr />
 		<router-outlet />
 	`,
-
 	styles: `
 		ul {
 			display: flex;

apps/test-app/src/app/control-error/control-error.component.ts

@@ -9,7 +9,6 @@ import { NgxControlError } from 'ngxtension/control-error';
 
 @Component({
 	selector: 'ngxtension-platform-control-error',
-	standalone: true,
 	imports: [NgxControlError, FormsModule, ReactiveFormsModule],
 	template: `
 		<form [formGroup]="form">

apps/test-app/src/app/control-value-accessor/control-value-accessor.ts

@@ -109,7 +109,6 @@ export class UserSelect {
 
 @Component({
 	selector: 'ngxtension-platform-control-value-accessor',
-	standalone: true,
 	imports: [
 		CommonModule,
 		FormsModule,

apps/test-app/src/app/drag/drag.component.ts

@@ -71,7 +71,6 @@ export class Box {
 }
 
 @Component({
-	standalone: true,
 	imports: [Box, BoxWithHost, NgxDrag],
 	template: `
 		<app-box />

apps/test-app/src/app/form-events/form-events.component.ts

@@ -9,7 +9,6 @@ import { allEventsObservable, allEventsSignal } from 'ngxtension/form-events';
 
 @Component({
 	selector: 'ngxtension-platform-intl',
-	standalone: true,
 	imports: [ReactiveFormsModule, JsonPipe, AsyncPipe],
 	template: `
 		<form [formGroup]="form">

apps/test-app/src/app/if-validator/if-validator.component.ts

@@ -4,7 +4,6 @@ import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ifValidator } from 'ngxtension/if-validator';
 
 @Component({
-	standalone: true,
 	imports: [CommonModule, ReactiveFormsModule],
 	host: {
 		style: 'display: block; margin: 12px',

apps/test-app/src/app/intl/intl.component.ts

@@ -8,7 +8,6 @@ import {
 
 @Component({
 	selector: 'ngxtension-platform-intl',
-	standalone: true,
 	imports: [
 		CommonModule,
 		DisplayNamesPipe,

apps/test-app/src/app/linked-query-param/linked-query-param-array.component.ts

@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
 import { linkedQueryParam } from 'ngxtension/linked-query-param';
 
 @Component({
-	standalone: true,
 	template: `
 		<div>
 			@for (id of IDs; track $index) {

apps/test-app/src/app/linked-query-param/linked-query-param-basic.component.ts

@@ -5,7 +5,6 @@ import { Title } from '@angular/platform-browser';
 import { linkedQueryParam } from 'ngxtension/linked-query-param';
 
 @Component({
-	standalone: true,
 	template: `
 		<div>
 			<pre>SearchQuery: {{ searchQuery() | json }}</pre>

apps/test-app/src/app/linked-query-param/linked-query-param-booleans.component.ts

@@ -7,7 +7,6 @@ import {
 } from 'ngxtension/linked-query-param';
 
 @Component({
-	standalone: true,
 	template: `
 		<div>
 			<pre>Show Deleted: {{ showDeleted() | json }}</pre>

apps/test-app/src/app/linked-query-param/linked-query-param-insideObject.component.ts

@@ -5,7 +5,6 @@ import { Router } from '@angular/router';
 import { linkedQueryParam } from 'ngxtension/linked-query-param';
 
 @Component({
-	standalone: true,
 	template: `
 		<div>
 			<label>

apps/test-app/src/app/linked-query-param/linked-query-param-number.component.ts

@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
 import { linkedQueryParam, paramToNumber } from 'ngxtension/linked-query-param';
 
 @Component({
-	standalone: true,
 	template: `
 		<div>
 			<pre>Page Number: {{ pageNumber() | json }}</pre>

apps/test-app/src/app/linked-query-param/linked-query-param-object.component.ts

@@ -14,7 +14,6 @@ interface MyFilters {
 }
 
 @Component({
-	standalone: true,
 	template: `
 		<div>
 			MyFilters:

apps/test-app/src/app/linked-query-param/linked-query-param.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
-	standalone: true,
 	template: `
 		<div>
 			<a routerLink="/linked-query-param/string" routerLinkActive="active">

apps/test-app/src/app/resize/resize.component.ts

@@ -4,7 +4,6 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { injectResize } from 'ngxtension/resize';
 
 @Component({
-	standalone: true,
 	template: `
 		<pre>{{ resize() | json }}</pre>
 	`,

apps/test-app/src/app/svg-sprite/svg-sprite.component.ts

@@ -46,7 +46,6 @@ export class FaBrandDirective {
 
 @Component({
 	selector: 'ngxtension-platform-svg-sprite',
-	standalone: true,
 	imports: [
 		NgxSvgSpriteFragment,
 		FaRegularDirective,

apps/test-app/src/app/track-by/track-by.component.ts

@@ -10,7 +10,6 @@ import {
 import { TrackById, TrackByProp } from 'ngxtension/trackby-id-prop';
 
 @Component({
-	standalone: true,
 	template: `
 		<ul #parentNoTrackBy>
 			<li *ngFor="let person of people">

docs/src/content/docs/utilities/Signals/signal-slice.md

@@ -261,18 +261,3 @@ effect(() => {
 	}
 });
 ```
-
-If you intend to trigger another `actionSource` from within your effects, it will be necessary to enable `allowSignalWrites` as triggering an `actionSource` will cause a value to be written to the state signal, e.g:
-
-```ts
-effect(
-	() => {
-		const status = state.status();
-
-		if (state.status() === 'complete') {
-			state.uploadAudio();
-		}
-	},
-	{ allowSignalWrites: true },
-);
-```

libs/ngxtension/README.md

@@ -36,3 +36,11 @@ nx generate ngxtension:init
 Check [the documentation](https://ngxtension.netlify.app/).
 
 <!-- UTILITIES:END -->
+
+## Supported Versions
+
+| `Angular` version | `ngxtension` version |
+|-------------------|----------------------|
+| 16.x.x            | 0.0.1                |
+| 16.x.x - 18.x.x   | 1.0.0 - 4.2.0        |
+| 19.x.x            | 5.0.0                |

libs/ngxtension/connect/src/connect.ts

@@ -158,10 +158,7 @@ export function connect(signal: WritableSignal<unknown>, ...args: any[]) {
 					return { ...prev, ...(originSignal() as object) };
 				});
 			},
-			{
-				allowSignalWrites: true,
-				injector,
-			},
+			{ injector },
 		);
 	}
 

libs/ngxtension/inject-lazy/src/inject-lazy-impl.ts

@@ -1,12 +1,12 @@
 import {
 	DestroyRef,
-	ENVIRONMENT_INITIALIZER,
 	EnvironmentInjector,
 	Injectable,
 	Injector,
 	Type,
 	createEnvironmentInjector,
 	inject,
+	provideEnvironmentInitializer,
 	type Provider,
 	type ProviderToken,
 } from '@angular/core';
@@ -85,12 +85,8 @@ export class InjectLazyImpl<T> {
  */
 export function mockLazyProvider<T>(type: Type<T>, mock: Type<unknown>) {
 	return [
-		{
-			provide: ENVIRONMENT_INITIALIZER,
-			multi: true,
-			useValue: () => {
-				inject(InjectLazyImpl).override(type, mock);
-			},
-		},
+		provideEnvironmentInitializer(() => {
+			inject(InjectLazyImpl).override(type, mock);
+		}),
 	];
 }

libs/ngxtension/inject-local-storage/src/inject-local-storage.spec.ts

@@ -192,19 +192,14 @@ describe('injectLocalStorage', () => {
 
 				const effectConsumer = await new Promise<ReactiveNode | null>(
 					(resolve) => {
-						const effectRef = effect(
-							() => {
-								localStorageSignal.set(newValue1);
-								localStorageSignal.update(() => newValue2);
-
-								resolve(getActiveConsumer());
-
-								effectRef.destroy();
-							},
-							{
-								allowSignalWrites: true,
-							},
-						);
+						const effectRef = effect(() => {
+							localStorageSignal.set(newValue1);
+							localStorageSignal.update(() => newValue2);
+
+							resolve(getActiveConsumer());
+
+							effectRef.destroy();
+						});
 
 						TestBed.flushEffects();
 					},

libs/ngxtension/package.json

@@ -18,8 +18,8 @@
 		"signals"
 	],
 	"peerDependencies": {
-		"@angular/common": ">=16.0.0",
-		"@angular/core": ">=16.0.0",
+		"@angular/common": ">=19.0.0",
+		"@angular/core": ">=19.0.0",
 		"@use-gesture/vanilla": "^10.0.0",
 		"rxjs": "^6.0.0 || ^7.0.0"
 	},
@@ -30,7 +30,7 @@
 	},
 	"dependencies": {
 		"tslib": "^2.3.0",
-		"@angular-eslint/bundled-angular-compiler": "^18.0.1",
+		"@angular-eslint/bundled-angular-compiler": "^19.0.1",
 		"@nx/devkit": "^20.0.0",
 		"nx": "^20.0.0",
 		"ts-morph": "^22.0.0"

libs/ngxtension/svg-sprite/src/svg-sprite.ts

@@ -1,7 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import {
 	Directive,
-	ENVIRONMENT_INITIALIZER,
 	ElementRef,
 	Injectable,
 	Input,
@@ -10,6 +9,7 @@ import {
 	computed,
 	inject,
 	makeEnvironmentProviders,
+	provideEnvironmentInitializer,
 	signal,
 	type OnInit,
 } from '@angular/core';
@@ -135,17 +135,16 @@ export type CreateNgxSvgSpriteOptions = Omit<NgxSvgSprite, 'url'> &
  */
 export const provideSvgSprites = (...sprites: CreateNgxSvgSpriteOptions[]) =>
 	makeEnvironmentProviders([
-		{
-			provide: ENVIRONMENT_INITIALIZER,
-			multi: true,
-			useFactory: () => {
+		provideEnvironmentInitializer(() => {
+			const initializerFn = (() => {
 				const service = inject(NgxSvgSprites);
 				return () =>
 					sprites.forEach((sprite) =>
 						service.register(createSvgSprite(sprite)),
 					);
-			},
-		},
+			})();
+			return initializerFn();
+		}),
 	]);
 
 /**