build: add Angular 17 support & update packages (#477)

Hello @santoshyadavdev,

This PR fixes #476.

What I did:

- I couldn't use `yarn` at all this time, I switched to `npm` (even
after everything was updated with `npm` and switching back to `yarn`)
- I updated all packages to latest versions (except `jasmine-core`)
- The nx cache is now located in the root folder of the repo, I added
`.nx` in `.gitignore`
- There was some problem with how the tsconfigs were done, I fixed all
of them (it was causing problems with nx migrations)
- I applied the migrations from nx
- I migrated `ngu-carousel-example` to use the new control-flow
  - I did not update the `README.md`
- I removed the cypress component testing config from
`ngu-carousel-example` as it was more or less useless
- I fixed errors found by the linter
- I fixed unit tests
- I removed `updateBuildableProjectDepsInPackageJson` from
`ngu-carousel` as it was deprecated
- removing it keeps the same behavior as if it was enable, that's what
we want
- I added missing `tsconfig.json` (cypress) in the `.eslintrc.json` of
`ngu-carousel`
- I updated the current SSR setup
- I first tried to migrate the new `application` builder, but it was not
working properly with modules. ~~I will investigate later if it comes
from `nx` or the `Angular CLI`~~ (thanks @JeanMeche for his help)
  - Could be related to angular/angular#52998
  - As said in https://riegler.fr/blog/2023-10-13-v17-builders: 
- `An interesting point to note is that if either 'ssr' or 'prerender'
are set to 'true' in the configuration file, the pages served with 'ng
serve' will be generated server side.`
- This was not working, that's one of the reason I kept the same setup
with `ssr-dev-server` & co.
- I already did the migration to `browser-esbuild` when I migrated to
`Angular 16`, so it is already using esbuild.
- Another reason is that `ng serve` using the ssr is not using
`server.ts` (which should not affect this repo, but let's play it safe),
track angular/angular-cli#26323
- I cleaned `polyfills` usage
- I updated the `CI` setup
- Angular supports node starting version `18.13.0`, the CI now runs on
`['18.13.0', '20']`
  - Updated to `actions/checkout@v4` & `actions/setup-node@v4`
  - Updated to use `npm`
- I bumped `ngu-carousel` for `Angular 17`
- I bumped `ngu-carousel` to `9.0.0` and I updated `README.md`

TODO on your side:

- Release a new major version `9.0.0`
- Close branches related to package update

Tell me if everything looks ok for you.

Have a nice day.

Author: Yberion

.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}"]