feat: update Angular to version 19 (#520)

Fixes #519 * remove no longer needed `standalone: true` flags * remove deprecated `allowSignalWrites: true` flag
uiuniversal · Feb 4, 2025 · a846c90 · a846c90
1 parent f4e9929
commit a846c90
Show file tree

Hide file tree

Showing 18 changed files with 5,150 additions and 6,295 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,9 @@
 [![npm version](https://badge.fury.io/js/%40ngu%2Fcarousel.svg)](https://badge.fury.io/js/%40ngu%2Fcarousel)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-18-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Angular Universal carousel
@@ -22,19 +24,20 @@ Demo available [Here](https://ngu-carousel.netlify.app)
 
 `ngu-carousel` supports touch actions and requires `hammerjs` to be installed before the `ngu-carousel` is installed.
 
-| Angular Version          | ngu-carousel Version                         |
-| ------------------------ | -------------------------------------------- |
-| Angular >= 18            | `npm i --save @ngu/carousel@18`          |
-| Angular >= 17            | `npm i --save @ngu/[email protected]`          |
-| Angular >= 16 standalone | `npm i --save @ngu/[email protected]`           |
-| Angular >= 16            | `npm i --save @ngu/[email protected]`           |
-| Angular >= 15            | `npm i --save @ngu/[email protected]`           |
-| Angular >= 14            | `npm i --save @ngu/[email protected]`           |
-| Angular >= 13            | `npm i --save @ngu/[email protected]`           |
-| Angular >= 12            | `npm i --save @ngu/[email protected]`           |
-| Angular >= 10            | `npm i --save @ngu/[email protected]`           |
-| Angular = 9              | `npm i --save @ngu/[email protected]`           |
-| Angular < 9              | `npm i --save @ngu/[email protected]`           |
+| Angular Version          | ngu-carousel Version               |
+| ------------------------ | ---------------------------------- |
+| Angular >= 19            | `npm i --save @ngu/carousel@19`    |
+| Angular >= 18            | `npm i --save @ngu/carousel@18`    |
+| Angular >= 17            | `npm i --save @ngu/[email protected]` |
+| Angular >= 16 standalone | `npm i --save @ngu/[email protected]` |
+| Angular >= 16            | `npm i --save @ngu/[email protected]` |
+| Angular >= 15            | `npm i --save @ngu/[email protected]` |
+| Angular >= 14            | `npm i --save @ngu/[email protected]` |
+| Angular >= 13            | `npm i --save @ngu/[email protected]` |
+| Angular >= 12            | `npm i --save @ngu/[email protected]` |
+| Angular >= 10            | `npm i --save @ngu/[email protected]` |
+| Angular = 9              | `npm i --save @ngu/[email protected]` |
+| Angular < 9              | `npm i --save @ngu/[email protected]` |
 
 ## Usage
 
@@ -62,7 +65,7 @@ import {
 })
 export class AppModule {}
 
-OR
+OR;
 
 @Component({
   imports: [
@@ -252,24 +255,24 @@ export type Custom = 'banner';
 export type Animate = 'lazy';
 ```
 
-| Command                   | Type          | Required | Description                                                                                                                                                                                                                   |
-| ------------------------- | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `grid`                    | Object        | Yes      | **xs** - mobile, **sm** - tablet, **md** - desktop, **lg** - large desktops, **xl** - extra large desktops, **all** - fixed width (When you use **all** make others 0 and vice versa)                                         |
-| `gridBreakpoints`         | Object        | optional | Determines the browser width in pixels that the grid displays the intended number of tiles.<br/><br/> default: `{sm: 768, md: 992, lg: 1200, xl: 1200}`                                                                       |
-| `slide`                   | number        | optional | It is used to slide the number items on click                                                                                                                                                                                 |
-| `speed`                   | milliseconds | optional | It is used for time taken to slide the number items                                                                                                                                                                           |
-| `interval`                | milliseconds | optional | It is used to make the carousel auto slide with given value. interval defines the interval between slides                                                                                                                         |
-| `load`                    | number        | optional | It is used to load the items similar to pagination. The carousel will trigger the carouselLoad function to load another set of items. It will help you to improve the performance of the app.**`(carouselLoad)="myfunc($event)"`** |
-| `point.visible`           | boolean       | optional | It is used to indicate no. of slides and also shows the current active slide.                                                                                                                                                 |
-| `point.hideOnSingleSlide` | boolean       | optional | It is used to hide the point indicator when slide is less than one.                                                                                                                                                           |
-| `touch`                   | boolean       | optional | It is used to active touch support to the carousel.                                                                                                                                                                           |
-| `easing`                  | string        | optional | It is used to define the easing style of the carousel. Only define the ease name without any timing like `ease`,`ease-in`                                                                                                     |
-| `loop`                    | boolean       | optional | It is used to loop the `ngu-item ngu-tile`. It must be true for `interval`                                                                                                                                                    |
-| `animation`               | string        | optional | It is used to animate the sliding items. currently it only supports `lazy`. more coming soon and also with custom CSS animation option                                                                                        |
-| `custom`                  | string        | optional | It is you to define the purpose of the carousel. Currently, it only supports `banner`.                                                                              |
-| `RTL`                     | boolean       | optional | This option enables the `rtl` direction and acts as rtl. By default it is set to `ltr`                                                                                                                                                 |
-| `vertical.enabled`        | boolean       | optional | This option enable the `vertical` direction                                                                                                                                                                                   |
-| `vertical.height`         | number       | optional | This option is used to set the height of the carousel                                                                                                                                                                         |
+| Command                   | Type         | Required | Description                                                                                                                                                                                                                        |
+| ------------------------- | ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `grid`                    | Object       | Yes      | **xs** - mobile, **sm** - tablet, **md** - desktop, **lg** - large desktops, **xl** - extra large desktops, **all** - fixed width (When you use **all** make others 0 and vice versa)                                              |
+| `gridBreakpoints`         | Object       | optional | Determines the browser width in pixels that the grid displays the intended number of tiles.<br/><br/> default: `{sm: 768, md: 992, lg: 1200, xl: 1200}`                                                                            |
+| `slide`                   | number       | optional | It is used to slide the number items on click                                                                                                                                                                                      |
+| `speed`                   | milliseconds | optional | It is used for time taken to slide the number items                                                                                                                                                                                |
+| `interval`                | milliseconds | optional | It is used to make the carousel auto slide with given value. interval defines the interval between slides                                                                                                                          |
+| `load`                    | number       | optional | It is used to load the items similar to pagination. The carousel will trigger the carouselLoad function to load another set of items. It will help you to improve the performance of the app.**`(carouselLoad)="myfunc($event)"`** |
+| `point.visible`           | boolean      | optional | It is used to indicate no. of slides and also shows the current active slide.                                                                                                                                                      |
+| `point.hideOnSingleSlide` | boolean      | optional | It is used to hide the point indicator when slide is less than one.                                                                                                                                                                |
+| `touch`                   | boolean      | optional | It is used to active touch support to the carousel.                                                                                                                                                                                |
+| `easing`                  | string       | optional | It is used to define the easing style of the carousel. Only define the ease name without any timing like `ease`,`ease-in`                                                                                                          |
+| `loop`                    | boolean      | optional | It is used to loop the `ngu-item ngu-tile`. It must be true for `interval`                                                                                                                                                         |
+| `animation`               | string       | optional | It is used to animate the sliding items. currently it only supports `lazy`. more coming soon and also with custom CSS animation option                                                                                             |
+| `custom`                  | string       | optional | It is you to define the purpose of the carousel. Currently, it only supports `banner`.                                                                                                                                             |
+| `RTL`                     | boolean      | optional | This option enables the `rtl` direction and acts as rtl. By default it is set to `ltr`                                                                                                                                             |
+| `vertical.enabled`        | boolean      | optional | This option enable the `vertical` direction                                                                                                                                                                                        |
+| `vertical.height`         | number       | optional | This option is used to set the height of the carousel                                                                                                                                                                              |
 
 ### Custom CSS for Point
 

diff --git a/apps/ngu-carousel-example/server.ts b/apps/ngu-carousel-example/server.ts
@@ -1,5 +1,5 @@
 import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
+import { CommonEngine } from '@angular/ssr/node';
 import express from 'express';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';

diff --git a/apps/ngu-carousel-example/src/app/app.component.ts b/apps/ngu-carousel-example/src/app/app.component.ts
@@ -2,7 +2,6 @@ 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'],

diff --git a/apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.component.ts b/apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.component.ts
@@ -10,7 +10,6 @@ import {
 } from '@ngu/carousel';
 
 @Component({
-  standalone: true,
   selector: 'app-banner-vertical',
   templateUrl: './banner-vertical.component.html',
   styleUrls: ['./banner-vertical.component.scss'],

diff --git a/apps/ngu-carousel-example/src/app/banner/banner.component.ts b/apps/ngu-carousel-example/src/app/banner/banner.component.ts
@@ -10,7 +10,6 @@ import {
 } from '@ngu/carousel';
 
 @Component({
-  standalone: true,
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss'],

diff --git a/apps/ngu-carousel-example/src/app/getting-started/getting-started.component.ts b/apps/ngu-carousel-example/src/app/getting-started/getting-started.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   selector: 'app-getting-started',
   templateUrl: './getting-started.component.html',
   styleUrls: ['./getting-started.component.scss'],

diff --git a/apps/ngu-carousel-example/src/app/main-nav/main-nav.component.ts b/apps/ngu-carousel-example/src/app/main-nav/main-nav.component.ts
@@ -10,7 +10,6 @@ import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/mat
 import { map } from 'rxjs';
 
 @Component({
-  standalone: true,
   selector: 'app-main-nav',
   templateUrl: './main-nav.component.html',
   styleUrls: ['./main-nav.component.scss'],

diff --git a/apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.component.ts b/apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.component.ts
@@ -10,7 +10,6 @@ import {
 } from '@ngu/carousel';
 
 @Component({
-  standalone: true,
   selector: 'app-tile-2-images',
   templateUrl: './tile-2-images.component.html',
   styleUrls: ['./tile-2-images.component.css'],

diff --git a/apps/ngu-carousel-example/src/app/tile/tile.component.ts b/apps/ngu-carousel-example/src/app/tile/tile.component.ts
@@ -11,7 +11,6 @@ import {
 } from '@ngu/carousel';
 
 @Component({
-  standalone: true,
   selector: 'app-tile',
   templateUrl: './tile.component.html',
   styleUrls: ['./tile.component.scss'],

diff --git a/apps/ngu-carousel-example/src/app/wrapped/wrapped-carousel/wrapped-carousel.component.ts b/apps/ngu-carousel-example/src/app/wrapped/wrapped-carousel/wrapped-carousel.component.ts
@@ -11,7 +11,6 @@ import {
 } from '@ngu/carousel';
 
 @Component({
-  standalone: true,
   selector: 'app-wrapped-carousel',
   templateUrl: 'wrapped-carousel.component.html',
   styleUrls: ['./wrapped-carousel.component.scss'],

diff --git a/apps/ngu-carousel-example/src/app/wrapped/wrapped.component.ts b/apps/ngu-carousel-example/src/app/wrapped/wrapped.component.ts
@@ -3,7 +3,6 @@ import data from '../../assets/mock/images.json';
 import { WrappedCarouselComponent } from './wrapped-carousel/wrapped-carousel.component';
 
 @Component({
-  standalone: true,
   selector: 'app-wrapped',
   template: `<app-wrapped-carousel [items]="items()" [grid]="grid"></app-wrapped-carousel>`,
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/libs/ngu/carousel/package.json b/libs/ngu/carousel/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@ngu/carousel",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/animations": "^18.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/animations": "^19.0.0",
     "hammerjs": "^2.0.0",
     "rxjs": "^7.0.0"
   },

diff --git a/libs/ngu/carousel/src/lib/ngu-carousel.directive.ts b/libs/ngu/carousel/src/lib/ngu-carousel.directive.ts
@@ -1,33 +1,28 @@
 import { Directive, TemplateRef, ViewContainerRef, inject } from '@angular/core';
 
 @Directive({
-  selector: '[NguCarouselItem]',
-  standalone: true
+  selector: '[NguCarouselItem]'
 })
 export class NguCarouselItemDirective {}
 
 @Directive({
-  selector: '[NguCarouselNext]',
-  standalone: true
+  selector: '[NguCarouselNext]'
 })
 export class NguCarouselNextDirective {}
 
 @Directive({
-  selector: '[NguCarouselPrev]',
-  standalone: true
+  selector: '[NguCarouselPrev]'
 })
 export class NguCarouselPrevDirective {}
 
 @Directive({
-  selector: '[NguCarouselPoint]',
-  standalone: true
+  selector: '[NguCarouselPoint]'
 })
 export class NguCarouselPointDirective {}
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: '[nguCarouselDef]',
-  standalone: true
+  selector: '[nguCarouselDef]'
 })
 export class NguCarouselDefDirective<T> {
   template = inject(TemplateRef);
@@ -36,8 +31,7 @@ export class NguCarouselDefDirective<T> {
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: '[nguCarouselOutlet]',
-  standalone: true
+  selector: '[nguCarouselOutlet]'
 })
 export class NguCarouselOutlet {
   viewContainer = inject(ViewContainerRef);

diff --git a/libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts b/libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts
@@ -61,8 +61,7 @@ const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode;
   styleUrls: ['ngu-carousel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [NguCarouselHammerManager],
-  imports: [NguCarouselOutlet],
-  standalone: true
+  imports: [NguCarouselOutlet]
 })
 export class NguCarousel<T, U extends NgIterable<T> = NgIterable<T>>
   extends NguCarouselStore
@@ -156,14 +155,11 @@ export class NguCarousel<T, U extends NgIterable<T> = NgIterable<T>>
       { phase: AfterRenderPhase.EarlyRead }
     );
 
-    effect(
-      () => {
-        const _ = this._defDirectives();
-        const data = this.dataSource();
-        untracked(() => this._checkChanges(data));
-      },
-      { allowSignalWrites: true }
-    );
+    effect(() => {
+      const _ = this._defDirectives();
+      const data = this.dataSource();
+      untracked(() => this._checkChanges(data));
+    });
 
     effect(cleanup => {
       const prevButton = this.prevButton();

diff --git a/libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.ts b/libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   selector: 'ngu-item',
   templateUrl: 'ngu-item.component.html',
   host: {

diff --git a/libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.ts b/libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   selector: 'ngu-tile',
   templateUrl: 'ngu-tile.component.html',
   styleUrls: ['ngu-tile.component.scss'],