feat: be zoneless!

Author: mpalourdio

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v17.3.0
+- Be Zoneless compatible before angular 20.
+
 ## v17.2.0
 - Drop `model()` in favor of `input()` where possible.
 

angular.json

@@ -32,10 +32,6 @@
           "builder": "@angular-builders/jest:run",
           "options": {
             "configPath": "./jest.config.ts",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
             "tsConfig": "./tsconfig.spec.json",
             "watch": false
           }

package-lock.json

@@ -61,7 +61,6 @@
     "ng-packagr": "^19.0.0",
     "rxjs": "^7.8.0",
     "typescript": "~5.7.2",
-    "typescript-eslint": "^8.18.0",
-    "zone.js": "~0.15.0"
+    "typescript-eslint": "^8.18.0"
   }
 }

package.json

@@ -1,5 +1,5 @@
 <div id="spinner"
-     *ngIf="isVisible$ | async"
+     *ngIf="isVisible()"
      [class.backdrop]="backdrop()"
      [style.opacity]="opacity()"
      [ngStyle]="{'background-color': backdrop() ? backdropBackgroundColor() : 'transparent'}">

src/lib/components/ng-http-loader.component.html

@@ -7,25 +7,27 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { AsyncPipe, NgComponentOutlet, NgIf, NgStyle } from '@angular/common';
-import { Component, input, model, OnInit, Type } from '@angular/core';
+import { NgComponentOutlet, NgIf, NgStyle } from '@angular/common';
+import { Component, input, model, OnInit, Signal, Type } from '@angular/core';
 import { merge, Observable, partition, timer } from 'rxjs';
 import { debounce, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
 import { PendingRequestsInterceptorConfigurer } from '../services/pending-requests-interceptor-configurer.service';
 import { SpinnerVisibilityService } from '../services/spinner-visibility.service';
 import { Spinkit, SPINKIT_COMPONENTS } from '../spinkits';
+import { toSignal } from "@angular/core/rxjs-interop";
 
 @Component({
     selector: 'ng-http-loader',
     standalone: true,
     templateUrl: './ng-http-loader.component.html',
     styleUrls: ['./ng-http-loader.component.scss'],
-    imports: [SPINKIT_COMPONENTS, NgStyle, NgComponentOutlet, NgIf, AsyncPipe]
+    imports: [SPINKIT_COMPONENTS, NgStyle, NgComponentOutlet, NgIf]
 })
 export class NgHttpLoaderComponent implements OnInit {
 
     spinkit = Spinkit;
     isVisible$!: Observable<boolean>;
+    isVisible: Signal<boolean | undefined>;
     visibleUntil = Date.now();
 
     readonly backdrop = input<boolean>(true);
@@ -42,15 +44,6 @@ export class NgHttpLoaderComponent implements OnInit {
     readonly spinner = model<string | null>(Spinkit.skWave);
 
     constructor(private pendingRequestsInterceptorConfigurer: PendingRequestsInterceptorConfigurer, private spinnerVisibility: SpinnerVisibilityService) {
-    }
-
-    ngOnInit(): void {
-        this.initIsvisibleObservable();
-        this.nullifySpinnerIfEntryComponentIsDefined();
-        this.initFilters();
-    }
-
-    private initIsvisibleObservable(): void {
         const [showSpinner$, hideSpinner$] = partition(this.pendingRequestsInterceptorConfigurer.pendingRequestsStatus$, h => h);
 
         this.isVisible$ = merge(
@@ -63,6 +56,12 @@ export class NgHttpLoaderComponent implements OnInit {
             distinctUntilChanged(),
             tap(h => this.updateExpirationDelay(h))
         );
+        this.isVisible = toSignal(this.isVisible$);
+    }
+
+    ngOnInit(): void {
+        this.nullifySpinnerIfEntryComponentIsDefined();
+        this.initFilters();
     }
 
     private nullifySpinnerIfEntryComponentIsDefined(): void {

src/lib/components/ng-http-loader.component.ts

@@ -9,7 +9,7 @@
 
 import { HttpClient, provideHttpClient, withInterceptors } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
@@ -32,16 +32,17 @@ describe('NgHttpLoaderComponent OnPush', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [HostComponent],
-            providers: [provideHttpClient(withInterceptors([pendingRequestsInterceptor$])), provideHttpClientTesting()]
+            providers: [
+                provideHttpClient(withInterceptors([pendingRequestsInterceptor$])),
+                provideHttpClientTesting(),
+                provideExperimentalZonelessChangeDetection(),
+            ]
         })
             .compileComponents();
-    });
 
-    beforeEach(() => {
         fixture = TestBed.createComponent(HostComponent);
         http = TestBed.inject(HttpClient);
         httpMock = TestBed.inject(HttpTestingController);
-        fixture.detectChanges();
     });
 
     it('should work as expected when the host component has ChangeDetectionStrategy.OnPush', fakeAsync(() => {

src/test/components/ng-http-loader.component.on-push.spec.ts

@@ -9,31 +9,31 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { of } from 'rxjs';
 import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
 import { SkThreeBounceComponent } from '../../lib/components/sk-three-bounce/sk-three-bounce.component';
+import { provideExperimentalZonelessChangeDetection, signal } from "@angular/core";
 
 describe('NgHttpLoaderComponentOutlet', () => {
     let component: NgHttpLoaderComponent;
     let fixture: ComponentFixture<NgHttpLoaderComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [NgHttpLoaderComponent]
+            imports: [NgHttpLoaderComponent],
+            providers: [
+                provideExperimentalZonelessChangeDetection(),
+            ]
         })
             .compileComponents();
-    });
 
-    beforeEach(() => {
         fixture = TestBed.createComponent(NgHttpLoaderComponent);
         component = fixture.componentInstance;
-        fixture.detectChanges();
     });
 
-    it('should be possible to specify an entryComponent', () => {
-        component.isVisible$ = of(true);
+    it('should be possible to specify an entryComponent', async () => {
+        component.isVisible = signal(true);
         fixture.componentRef.setInput('entryComponent', SkThreeBounceComponent);
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element = fixture
             .debugElement

src/test/components/ng-http-loader.component.outlet.spec.ts

@@ -10,6 +10,7 @@
 import { HttpClient, provideHttpClient, withInterceptors } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { provideExperimentalZonelessChangeDetection, signal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { forkJoin, Observable, of, Subscription } from 'rxjs';
 import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
@@ -29,19 +30,20 @@ describe('NgHttpLoaderComponent', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [NgHttpLoaderComponent],
-            providers: [provideHttpClient(withInterceptors([pendingRequestsInterceptor$])), provideHttpClientTesting()]
+            providers: [
+                provideHttpClient(withInterceptors([pendingRequestsInterceptor$])),
+                provideHttpClientTesting(),
+                provideExperimentalZonelessChangeDetection(),
+            ]
         })
             .compileComponents();
-    });
 
-    beforeEach(() => {
         fixture = TestBed.createComponent(NgHttpLoaderComponent);
         component = fixture.componentInstance;
         http = TestBed.inject(HttpClient);
         httpMock = TestBed.inject(HttpTestingController);
         spinner = TestBed.inject(SpinnerVisibilityService);
         isVisible = false;
-        fixture.detectChanges();
         isVisibleSubscription = component.isVisible$.subscribe(v => isVisible = v);
     });
 
@@ -53,9 +55,9 @@ describe('NgHttpLoaderComponent', () => {
         expect(component).toBeTruthy();
     });
 
-    it('should create the ng-http-loader component with default values', () => {
-        component.isVisible$ = of(true);
-        fixture.detectChanges();
+    it('should create the ng-http-loader component with default values', async () => {
+        component.isVisible = signal(true);
+        await fixture.whenStable();
 
         const element = fixture
             .debugElement
@@ -65,10 +67,10 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.className).toBe('sk-wave colored');
     });
 
-    it('should not set the colored class if background-color is defined', () => {
-        component.isVisible$ = of(true);
+    it('should not set the colored class if background-color is defined', async () => {
+        component.isVisible = signal(true);
         fixture.componentRef.setInput('backgroundColor', '#ff0000');
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element = fixture
             .debugElement
@@ -86,10 +88,10 @@ describe('NgHttpLoaderComponent', () => {
         expect(element).toBeNull();
     });
 
-    it('should be able to specify another known spinner', () => {
-        component.isVisible$ = of(true);
+    it('should be able to specify another known spinner', async () => {
+        component.isVisible = signal(true);
         component.spinner.set(Spinkit.skRotatingPlane);
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element = fixture
             .debugElement
@@ -99,10 +101,10 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.className).toBe('sk-rotating-plane colored-parent');
     });
 
-    it('should allow us to specify a custom background-color', () => {
-        component.isVisible$ = of(true);
+    it('should allow us to specify a custom background-color', async () => {
+        component.isVisible = signal(true);
         fixture.componentRef.setInput('backgroundColor', '#ff0000');
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element = fixture
             .debugElement
@@ -749,9 +751,9 @@ describe('NgHttpLoaderComponent', () => {
         expect(isVisible).toBeFalsy();
     }));
 
-    it('should set the backdrop CSS class by default', () => {
-        component.isVisible$ = of(true);
-        fixture.detectChanges();
+    it('should set the backdrop CSS class by default', async () => {
+        component.isVisible = signal(true);
+        await fixture.whenStable();
 
         const element = fixture
             .debugElement
@@ -761,10 +763,10 @@ describe('NgHttpLoaderComponent', () => {
         expect(element).toBeTruthy();
     });
 
-    it('should be possible to remove the backdrop CSS class', () => {
+    it('should be possible to remove the backdrop CSS class', async () => {
         component.isVisible$ = of(true);
         fixture.componentRef.setInput('backdrop', false);
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element = fixture
             .debugElement
@@ -773,9 +775,9 @@ describe('NgHttpLoaderComponent', () => {
         expect(element).toBeNull();
     });
 
-    it('should have a default opacity', () => {
-        component.isVisible$ = of(true);
-        fixture.detectChanges();
+    it('should have a default opacity', async () => {
+        component.isVisible = signal(true);
+        await fixture.whenStable();
 
         const element: HTMLElement = fixture
             .debugElement
@@ -785,10 +787,10 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.style.opacity).toBe(`0${component.opacity()}`);
     });
 
-    it('should be possible to override opacity', () => {
-        component.isVisible$ = of(true);
+    it('should be possible to override opacity', async () => {
+        component.isVisible = signal(true);
         fixture.componentRef.setInput('opacity', '.3');
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element: HTMLElement = fixture
             .debugElement
@@ -798,9 +800,9 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.style.opacity).toBe(`0${component.opacity()}`);
     });
 
-    it('should have a default backdrop background color if backdrop is true', () => {
-        component.isVisible$ = of(true);
-        fixture.detectChanges();
+    it('should have a default backdrop background color if backdrop is true', async() => {
+        component.isVisible = signal(true);
+        await fixture.whenStable();
 
         const element: HTMLElement = fixture
             .debugElement
@@ -810,10 +812,10 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.style.backgroundColor).toBe('rgb(241, 241, 241)');
     });
 
-    it('should be possible to override backdrop background color when backdrop is true', () => {
-        component.isVisible$ = of(true);
+    it('should be possible to override backdrop background color when backdrop is true', async () => {
+        component.isVisible = signal(true);
         fixture.componentRef.setInput('backdropBackgroundColor', '#777777');
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element: HTMLElement = fixture
             .debugElement
@@ -823,10 +825,10 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.style.backgroundColor).toBe('rgb(119, 119, 119)');
     });
 
-    it('should not have a transparent backdrop background color if backdrop is false', () => {
-        component.isVisible$ = of(true);
+    it('should not have a transparent backdrop background color if backdrop is false', async () => {
+        component.isVisible = signal(true);
         fixture.componentRef.setInput('backdrop', false);
-        fixture.detectChanges();
+        await fixture.whenStable();
 
         const element: HTMLElement = fixture
             .debugElement