build: add Angular 17 support & update packages

.github/workflows/nodejs.yml

@@ -15,18 +15,18 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ['16', '18']
+        node-version: ['18.13.0', '20']
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn
+        run: npm ci
       - name: Build
         run: |
-          yarn nx run-many --target=build --all
+          npx nx run-many --target=build --all
         env:
           CI: true

.github/workflows/npm-publish.yml

@@ -14,26 +14,26 @@ jobs:
     build:
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
               with:
-                  node-version: 18
-            - run: yarn
+                  node-version: 18.13.0
+            - run: npm ci
 
     publish-npm:
         needs: build
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 18.13.0
                   registry-url: https://registry.npmjs.org/
                   scope: '@ngu'
             - name: Build and Publish
               run: |
-                   yarn install
-                   yarn nx run-many --target=build --all
+                   npm ci
+                   npx nx run-many --target=build --all
                    cd dist/libs/ngu/carousel
                    npm publish --access=public
               shell: bash

.gitignore

@@ -31,7 +31,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
-/.angular/cache
+.angular
 /.sass-cache
 /connect.lock
 /coverage
@@ -41,6 +41,7 @@ yarn-error.log
 testem.log
 /typings
 **/reports
+.nx
 
 # System Files
 .DS_Store

.prettierignore

@@ -1,2 +1,5 @@
 package.json
 *.yml
+
+/.nx/cache
+.angular

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-16-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Angular Universal carousel
@@ -22,17 +24,18 @@ 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 >= 16 standalone  | `npm i --save @ngu/carousel@latest` |
-| 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 >= 17            | `npm i --save @ngu/carousel@carousel@latest` |
+| 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
 
@@ -49,13 +52,13 @@ import {
 
 @NgModule({
   imports: [
-  NguCarousel, 
-  NguTileComponent,   
-  NguCarousel,
-  NguCarouselDefDirective,
-  NguCarouselNextDirective,
-  NguCarouselPrevDirective,
-  NguItemComponent
+    NguCarousel,
+    NguTileComponent,
+    NguCarousel,
+    NguCarouselDefDirective,
+    NguCarouselNextDirective,
+    NguCarouselPrevDirective,
+    NguItemComponent
   ]
 })
 export class AppModule {}
@@ -64,19 +67,17 @@ OR
 
 @Component({
   imports: [
-  NguCarousel,
-  NguTileComponent,   
-  NguCarousel,
-  NguCarouselDefDirective,
-  NguCarouselNextDirective,
-  NguCarouselPrevDirective,
-  NguItemComponent
+    NguCarousel,
+    NguTileComponent,
+    NguCarousel,
+    NguCarouselDefDirective,
+    NguCarouselNextDirective,
+    NguCarouselPrevDirective,
+    NguItemComponent
   ],
   standalone: true
 })
 export class AppComponent {}
-
-
 ```
 
 2. Then use in your component:

apps/ngu-carousel-e2e/cypress.config.ts

@@ -3,7 +3,12 @@ import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: {
-    ...nxE2EPreset(__dirname),
+    ...nxE2EPreset(__dirname, {
+      devServerTargets: {
+        default: 'ngu-carousel-example:serve:development',
+        production: 'ngu-carousel-example:serve:production'
+      }
+    }),
     /**
      * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
      * This can cause tests to start breaking where not indended.

apps/ngu-carousel-e2e/project.json

@@ -4,21 +4,8 @@
   "sourceRoot": "apps/ngu-carousel-e2e/src",
   "projectType": "application",
   "targets": {
-    "e2e": {
-      "executor": "@nx/cypress:cypress",
-      "options": {
-        "cypressConfig": "apps/ngu-carousel-e2e/cypress.config.ts",
-        "devServerTarget": "ngu-carousel-example:serve:development",
-        "testingType": "e2e"
-      },
-      "configurations": {
-        "production": {
-          "devServerTarget": "ngu-carousel-example:serve:production"
-        }
-      }
-    },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/ngu-carousel-e2e/**/*.{js,ts}"]