build: add Angular 16 support & update packages (#450)

Hello,

This PR fixes #449.

What I did:

- I couldn't use `yarn` to run the nx migration so I had to switch to
`npm`:
  - deleted `yarn.lock`
  - deleted `node_modules`
  - `npm install`
- I executed the nx migration (with `npm`) to `nx 16.1` which also
migrated to `Angular 16`
  - `npx nx migrate latest`
  - There was nothing related to `Angular 16` migration this time
  - I did not migrate to standalone nor inject pattern
- I then had to update Storybook packages to `7.1.0-alpha.13` to support
`Angular 16` + `Typescript 5` before installing the migrated packages
- I removed `node_modules` & `package-lock.json` and switched back to
`yarn`
  - then `yarn install`
- I applied the migration
  - `yarn nx migrate --run-migrations`
- The migration migrated Storybook to full version 7
  - For more information it created `storybook-migration-summary.md`
- I had to switch back again to `npm` because `caniuse-lite` wasn't
installing properly with `yarn` which caused problem when building
  - It was missing some files in `caniuse-lite/dist/unpacker`
- I updated the `.gitignore` to reflect nx project migration
  - Properly ignore `reports` folders
- I had to explicitly install `core-js`
- I also had to update the import in `test.ts` of the lib to
`core-js/stable/reflect`
- I added `hammerjs` in `allowedCommonJsDependencies` for the demo app
- I updated all packages to latest version
- I scoped package versions to maximum `patch`
- After updating all packages, `caniuse-lite` was installed properly so
I switched back to `yarn` 😄
- CI workflow `nodejs` now run on `Node.js 16` and `18`
  - `Node.js 14` is not compatible anymore with Angular
- CI workflow `npm-publish` now run on `Node.js 18`
- `actions/setup-node` updated to `v3` on all workflows

Problems:

- I was not able to fix `component-test`
- I was not able to fix `storybook`

Note:

- Since the repo got moved to nx, it seems that some Typescript eslint
rules were removed, if you want to add them back:
- For `"files": ["*.ts"]` add `"plugin:@nx/typescript"` in the
`"extends": [...]` array
- I didn't add it cause I'm not sure how to properly fix all the
problems on the project
- I removed the unused comments using previous eslint setup (before nx
migration) for cypress project (in `commands.ts`)

TODO on your side:

- Update compatibility array
- Release a new major version `8.0.0`
- Close branches related to package update

.eslintrc.json

@@ -41,7 +41,7 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -57,5 +57,6 @@
       }
     }
   ],
-  "plugins": ["@nrwl/nx"]
+  "plugins": ["@nx"],
+  "extends": ["plugin:storybook/recommended"]
 }

.github/workflows/nodejs.yml

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

.github/workflows/npm-publish.yml

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

.gitignore

@@ -40,8 +40,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
-/reports
-/projects/*/reports
+**/reports
 
 # System Files
 .DS_Store

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

@@ -1,15 +1,15 @@
 import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: {
     ...nxE2EPreset(__dirname),
     /**
-    * TODO(@nrwl/cypress): In Cypress v12,the testIsolation option is turned on by default. 
-    * This can cause tests to start breaking where not indended.
-    * You should consider enabling this once you verify tests do not depend on each other
-    * More Info: https://docs.cypress.io/guides/references/migration-guide#Test-Isolation
-    **/
-    testIsolation: false,
+     * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
+     * This can cause tests to start breaking where not indended.
+     * You should consider enabling this once you verify tests do not depend on each other
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#Test-Isolation
+     **/
+    testIsolation: false
   }
 });

apps/ngu-carousel-e2e/project.json

@@ -5,7 +5,7 @@
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/ngu-carousel-e2e/cypress.config.ts",
         "devServerTarget": "ngu-carousel-example:serve:development",
@@ -18,7 +18,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/ngu-carousel-e2e/**/*.{js,ts}"]

apps/ngu-carousel-e2e/src/support/commands.ts

@@ -8,9 +8,7 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Cypress {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
     login(email: string, password: string): void;
   }

apps/ngu-carousel-example/cypress/support/commands.ts

@@ -9,9 +9,7 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Cypress {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
     login(email: string, password: string): void;
   }

apps/ngu-carousel-example/project.json

@@ -31,7 +31,10 @@
           "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
           "apps/ngu-carousel-example/src/styles.scss"
         ],
-        "scripts": []
+        "scripts": [],
+        "allowedCommonJsDependencies": [
+          "hammerjs"
+        ]
       },
       "configurations": {
         "production": {
@@ -95,7 +98,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "options": {
         "lintFilePatterns": [
           "apps/ngu-carousel-example/**/*.ts",
@@ -104,7 +107,7 @@
       }
     },
     "component-test": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/ngu-carousel-example/cypress.config.ts",
         "testingType": "component"

decorate-angular-cli.js

@@ -26,10 +26,10 @@ const cp = require('child_process');
 const isWindows = os.platform() === 'win32';
 let output;
 try {
-  output = require('@nrwl/workspace').output;
+  output = require('@nx/workspace').output;
 } catch (e) {
   console.warn(
-    'Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.'
+    'Angular CLI could not be decorated to enable computation caching. Please ensure @nx/workspace is installed.'
   );
   process.exit(0);
 }

libs/ngu/carousel/.storybook/main.js

@@ -1,9 +1,15 @@
 module.exports = {
-  core: { builder: 'webpack5' },
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials']
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: "@storybook/angular",
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
 };
 
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs

libs/ngu/carousel/cypress/support/commands.ts

@@ -9,9 +9,7 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Cypress {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
     login(email: string, password: string): void;
   }

libs/ngu/carousel/package.json

@@ -2,14 +2,14 @@
   "name": "@ngu/carousel",
   "version": "7.1.3",
   "peerDependencies": {
-    "@angular/common": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/animations": "^15.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/animations": "^16.0.0",
     "hammerjs": "^2.0.0",
     "rxjs": "^7.0.0"
   },
   "dependencies": {
-    "tslib": "2.4.1"
+    "tslib": "^2.5.0"
   },
   "license": "MIT",
   "repository": {

libs/ngu/carousel/project.json

@@ -6,7 +6,7 @@
   "prefix": "ngu",
   "targets": {
     "build": {
-      "executor": "@nrwl/angular:package",
+      "executor": "@nx/angular:package",
       "options": {
         "project": "libs/ngu/carousel/ng-package.json",
         "updateBuildableProjectDepsInPackageJson": false
@@ -30,13 +30,13 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "options": {
         "lintFilePatterns": ["libs/ngu/carousel/**/*.ts", "libs/ngu/carousel/**/*.html"]
       }
     },
     "component-test": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "libs/ngu/carousel/cypress.config.ts",
         "testingType": "component"
@@ -72,7 +72,7 @@
       }
     },
     "static-storybook": {
-      "executor": "@nrwl/web:file-server",
+      "executor": "@nx/web:file-server",
       "options": {
         "buildTarget": "@ngu/carousel:build-storybook",
         "staticFilePath": "dist/storybook/@ngu/carousel"

libs/ngu/carousel/src/test.ts

@@ -5,7 +5,7 @@ import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
-import 'core-js/es7/reflect';
+import 'core-js/stable/reflect';
 import 'zone.js/dist/zone';
 import 'zone.js/dist/zone-testing';
 

nx.json

@@ -5,17 +5,29 @@
   },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "@nrwl/nx-cloud",
+      "runner": "nx-cloud",
       "options": {
-        "cacheableOperations": ["build", "test", "lint", "component-test", "build-storybook"],
+        "cacheableOperations": [
+          "build",
+          "test",
+          "lint",
+          "component-test",
+          "build-storybook"
+        ],
         "accessToken": "ZDc5YjI3NDItNzg5OS00YWM4LWE4ODItZjAzNjFkOWUwNzE3fHJlYWQtd3JpdGU=",
-        "runtimeCacheInputs": ["node -v", "node ./scripts/get-os.js"]
+        "runtimeCacheInputs": [
+          "node -v",
+          "node ./scripts/get-os.js"
+        ]
       }
     }
   },
   "namedInputs": {
     "sharedGlobals": [],
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
     "production": [
       "default",
       "!{projectRoot}/tsconfig.spec.json",
@@ -31,29 +43,53 @@
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
     },
     "test": {
-      "inputs": ["default", "^production", "{workspaceRoot}/karma.conf.js"]
+      "inputs": [
+        "default",
+        "^production",
+        "{workspaceRoot}/karma.conf.js"
+      ]
     },
     "lint": {
-      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.eslintrc.json"
+      ]
     },
     "e2e": {
-      "inputs": ["default", "^production"]
+      "inputs": [
+        "default",
+        "^production"
+      ]
     },
     "component-test": {
-      "inputs": ["default", "^production"]
+      "inputs": [
+        "default",
+        "^production"
+      ]
     },
     "build-storybook": {
-      "inputs": ["default", "^production", "!{projectRoot}/.storybook/**/*"]
+      "inputs": [
+        "default",
+        "^production",
+        "!{projectRoot}/.storybook/**/*"
+      ]
     }
   },
   "cli": {
     "analytics": false,
     "packageManager": "yarn",
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   },
   "generators": {
     "@angular-eslint/schematics:application": {