refactor: use signals for all

Author: sheikalthaf

.github/workflows/nodejs.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ['20', '18.13.0']
+        node-version: ['20', '18.19.1']
 
     steps:
       - uses: actions/checkout@v4

apps/ngu-carousel-example/server.ts

@@ -1,16 +1,16 @@
-import 'zone.js';
-
 import { APP_BASE_HREF } from '@angular/common';
 import { CommonEngine } from '@angular/ssr';
 import express from 'express';
-import { join } from 'node:path';
-import { AppServerModule } from './src/main.server';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import bootstrap from './src/main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
-  const browserDistFolder = join(process.cwd(), 'dist/apps/ngu-carousel-example/browser');
-  const pathToIndexHtml = join(browserDistFolder, 'index.html');
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
 
   const commonEngine = new CommonEngine();
 
@@ -21,21 +21,23 @@ export function app(): express.Express {
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
   server.get(
-    '*.*',
+    '**',
     express.static(browserDistFolder, {
-      maxAge: '1y'
+      maxAge: '1y',
+      index: 'index.html'
     })
   );
 
   // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
+  server.get('**', (req, res, next) => {
     const { protocol, originalUrl, baseUrl, headers } = req;
 
     commonEngine
       .render({
-        bootstrap: AppServerModule,
-        documentFilePath: pathToIndexHtml,
+        bootstrap,
+        documentFilePath: indexHtml,
         url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: browserDistFolder,
         providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }]
       })
       .then(html => res.send(html))
@@ -55,14 +57,4 @@ function run(): void {
   });
 }
 
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-const moduleFilename = mainModule && mainModule.filename || '';
-if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
-  run();
-}
-
-export * from './src/main.server';
+run();

apps/ngu-carousel-example/src/app/app-server.config.ts

@@ -1,9 +1,9 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideRouter } from '@angular/router';
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
-import { APP_ROUTES } from './app.routes';
+import { appConfig } from './app.config';
 
-export const appServerConfig: ApplicationConfig = {
-  providers: [provideRouter(APP_ROUTES), provideAnimations(), provideServerRendering()]
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()]
 };
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

apps/ngu-carousel-example/src/app/app.component.ts

@@ -1,59 +1,12 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component
-} from '@angular/core';
-import { NguCarouselConfig } from '@ngu/carousel';
-import { interval, Observable } from 'rxjs';
-import { map, startWith, take } from 'rxjs/operators';
-import { slider } from './slide-animation';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MainNavComponent } from './main-nav/main-nav.component';
 
 @Component({
   standalone: true,
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  animations: [slider],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MainNavComponent]
 })
-export class AppComponent implements AfterViewInit {
-  images = ['assets/bg.jpg', 'assets/car.png', 'assets/canberra.jpg', 'assets/holi.jpg'];
-
-  public carouselTileItems$: Observable<number[]>;
-  public carouselTileConfig: NguCarouselConfig = {
-    grid: { xs: 1, sm: 1, md: 1, lg: 5, all: 0 },
-    speed: 250,
-    point: {
-      visible: true
-    },
-    touch: true,
-    loop: true,
-    interval: { timing: 1500 },
-    animation: 'lazy'
-  };
-  tempData: any[];
-
-  constructor(private cdr: ChangeDetectorRef) {
-    this.tempData = [];
-
-    this.carouselTileItems$ = interval(500).pipe(
-      startWith(-1),
-      take(30),
-      map(() => {
-        const data = (this.tempData = [
-          ...this.tempData,
-          this.images[Math.floor(Math.random() * this.images.length)]
-        ]);
-
-        return data;
-      })
-    );
-  }
-
-  ngAfterViewInit() {
-    this.cdr.detectChanges();
-  }
-}
+export class AppComponent {}

apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.component.html

@@ -1,9 +1,5 @@
 <h2>Banner Vertical</h2>
-<ngu-carousel
-  [inputs]="carouselBanner"
-  [dataSource]="carouselTileItems$ | async"
-  (onMove)="onmoveFn($event)"
->
+<ngu-carousel [inputs]="carouselBanner" [dataSource]="items()" (onMove)="onmoveFn($event)">
   <button NguCarouselPrev class="leftRs">&lt;</button>
 
   <ngu-item *nguCarouselDef="let item; index as i; let ani = animate" [@slider]="ani">

apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.component.ts

@@ -1,9 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, afterNextRender, signal } from '@angular/core';
 import { NguCarouselConfig } from '@ngu/carousel';
-import { interval, Observable } from 'rxjs';
-import { map, startWith, take } from 'rxjs/operators';
 import { slider } from '../slide-animation';
-import { AsyncPipe } from '@angular/common';
 import {
   NguItemComponent,
   NguCarouselPrevDirective,
@@ -24,8 +21,7 @@ import {
     NguCarouselPrevDirective,
     NguCarouselDefDirective,
     NguItemComponent,
-    NguCarouselNextDirective,
-    AsyncPipe
+    NguCarouselNextDirective
   ]
 })
 export class BannerVerticalComponent {
@@ -52,23 +48,23 @@ export class BannerVerticalComponent {
   };
   tempData: any[];
 
-  public carouselTileItems$: Observable<number[]>;
+  public items = signal<string[]>([]);
 
   constructor() {
-    this.tempData = [];
-
-    this.carouselTileItems$ = interval(500).pipe(
-      startWith(-1),
-      take(30),
-      map(() => {
-        const data = (this.tempData = [
-          ...this.tempData,
-          this.images[Math.floor(Math.random() * this.images.length)]
-        ]);
+    this.addItem();
+    afterNextRender(() => {
+      const id = setInterval(() => {
+        this.addItem();
+        if (this.items().length >= 30) {
+          clearInterval(id);
+        }
+      }, 500);
+    });
+  }
 
-        return data;
-      })
-    );
+  addItem() {
+    const i = Math.floor(Math.random() * this.images.length);
+    this.items.update(items => [...items, this.images[i]]);
   }
 
   /* It will be triggered on every slide*/

apps/ngu-carousel-example/src/app/banner/banner.component.html

@@ -1,7 +1,7 @@
 <h2>Banner</h2>
 <ngu-carousel
   [inputs]="carouselBanner"
-  [dataSource]="carouselTileItems$ | async"
+  [dataSource]="items()"
   (onMove)="onmoveFn($event)"
   [trackBy]="trackCarousel"
 >

apps/ngu-carousel-example/src/app/banner/banner.component.ts

@@ -1,9 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, afterNextRender, signal } from '@angular/core';
 import { NguCarouselConfig } from '@ngu/carousel';
-import { interval, Observable } from 'rxjs';
-import { map, startWith, take } from 'rxjs/operators';
 import { slider } from '../slide-animation';
-import { AsyncPipe } from '@angular/common';
 import {
   NguItemComponent,
   NguCarouselPrevDirective,
@@ -24,8 +21,7 @@ import {
     NguCarouselPrevDirective,
     NguCarouselDefDirective,
     NguItemComponent,
-    NguCarouselNextDirective,
-    AsyncPipe
+    NguCarouselNextDirective
   ]
 })
 export class BannerComponent {
@@ -52,23 +48,23 @@ export class BannerComponent {
   };
   tempData: any[];
 
-  public carouselTileItems$: Observable<number[]>;
+  public items = signal<string[]>([]);
 
   constructor() {
-    this.tempData = [];
-
-    this.carouselTileItems$ = interval(500).pipe(
-      startWith(-1),
-      take(30),
-      map(() => {
-        const data = (this.tempData = [
-          ...this.tempData,
-          this.images[Math.floor(Math.random() * this.images.length)]
-        ]);
+    this.addItem();
+    afterNextRender(() => {
+      const id = setInterval(() => {
+        this.addItem();
+        if (this.items().length >= 30) {
+          clearInterval(id);
+        }
+      }, 500);
+    });
+  }
 
-        return data;
-      })
-    );
+  addItem() {
+    const i = Math.floor(Math.random() * this.images.length);
+    this.items.update(items => [...items, this.images[i]]);
   }
 
   /* It will be triggered on every slide*/

apps/ngu-carousel-example/src/app/main-nav/main-nav.component.html

@@ -3,9 +3,9 @@
     #drawer
     class="sidenav"
     fixedInViewport
-    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-    [mode]="(isHandset$ | async) ? 'over' : 'side'"
-    [opened]="(isHandset$ | async) === false"
+    [attr.role]="isHandset() ? 'dialog' : 'navigation'"
+    [mode]="isHandset() ? 'over' : 'side'"
+    [opened]="isHandset() === false"
   >
     <mat-toolbar>Banner Types</mat-toolbar>
     <mat-nav-list>
@@ -18,7 +18,7 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
-      @if (isHandset$ | async) {
+      @if (isHandset()) {
         <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
           <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
         </button>

apps/ngu-carousel-example/src/app/main-nav/main-nav.component.ts

@@ -1,14 +1,13 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
-import { AsyncPipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton, MatAnchor } from '@angular/material/button';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import { MatNavList, MatListItem } from '@angular/material/list';
 import { MatToolbar } from '@angular/material/toolbar';
 import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
+import { map } from 'rxjs';
 
 @Component({
   standalone: true,
@@ -27,14 +26,12 @@ import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/mat
     MatIconButton,
     MatIcon,
     MatAnchor,
-    RouterOutlet,
-    AsyncPipe
+    RouterOutlet
   ]
 })
 export class MainNavComponent {
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
-    map(result => result.matches),
-    shareReplay()
+  isHandset = toSignal(
+    this.breakpointObserver.observe(Breakpoints.Handset).pipe(map(result => result.matches))
   );
 
   constructor(private breakpointObserver: BreakpointObserver) {}