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

Yberion · web-flow · commit 33862ed60653 · 2023-05-16T16:54:41.000+02:00
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
diff --git a/.eslintrc.json b/.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"]
 }
diff --git a/.github/workflows/nodejs.yml b/.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
diff --git a/.github/workflows/npm-publish.yml b/.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
diff --git a/.gitignore b/.gitignore
@@ -40,8 +40,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
-/reports
-/projects/*/reports
+**/reports
 
 # System Files
 .DS_Store
diff --git a/apps/ngu-carousel-e2e/cypress.config.ts b/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
   }
 });
diff --git a/apps/ngu-carousel-e2e/project.json b/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}"]
diff --git a/apps/ngu-carousel-e2e/src/support/commands.ts b/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;
   }
diff --git a/apps/ngu-carousel-example/cypress/support/commands.ts b/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;
   }
diff --git a/apps/ngu-carousel-example/project.json b/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"
diff --git a/decorate-angular-cli.js b/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);
 }
diff --git a/libs/ngu/carousel/.storybook/main.js b/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
diff --git a/libs/ngu/carousel/cypress/support/commands.ts b/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;
   }
diff --git a/libs/ngu/carousel/package.json b/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": {
diff --git a/libs/ngu/carousel/project.json b/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"
diff --git a/libs/ngu/carousel/src/test.ts b/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';
 
diff --git a/nx.json b/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": {
diff --git a/package.json b/package.json
diff --git a/storybook-migration-summary.md b/storybook-migration-summary.md
diff --git a/tools/generators/.gitkeep b/tools/generators/.gitkeep
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@`
`41`	`41`	`{`
`42`	`42`	`"files": [".ts", ".tsx", ".js", ".jsx"],`
`43`	`43`	`"rules": {`
`44`		`- "@nrwl/nx/enforce-module-boundaries": [`
	`44`	`+ "@nx/enforce-module-boundaries": [`
`45`	`45`	`"error",`
`46`	`46`	`{`
`47`	`47`	`"enforceBuildableLibDependency": true,`
`@@ -57,5 +57,6 @@`
`57`	`57`	`}`
`58`	`58`	`}`
`59`	`59`	`],`
`60`		`- "plugins": ["@nrwl/nx"]`
	`60`	`+ "plugins": ["@nx"],`
	`61`	`+ "extends": ["plugin:storybook/recommended"]`
`61`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,9 +8,7 @@`
`8`	`8`	`// https://on.cypress.io/custom-commands`
`9`	`9`	`// ***********************************************`
`10`	`10`
`11`		`-// eslint-disable-next-line @typescript-eslint/no-namespace`
`12`	`11`	`declare namespace Cypress {`
`13`		`- // eslint-disable-next-line @typescript-eslint/no-unused-vars`
`14`	`12`	`interface Chainable<Subject> {`
`15`	`13`	`login(email: string, password: string): void;`
`16`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,9 +9,7 @@`
`9`	`9`	`// https://on.cypress.io/custom-commands`
`10`	`10`	`// ***********************************************`
`11`	`11`
`12`		`-// eslint-disable-next-line @typescript-eslint/no-namespace`
`13`	`12`	`declare namespace Cypress {`
`14`		`- // eslint-disable-next-line @typescript-eslint/no-unused-vars`
`15`	`13`	`interface Chainable<Subject> {`
`16`	`14`	`login(email: string, password: string): void;`
`17`	`15`	`}`