chore: migrate to nx 16.1 (ngworker#153)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] The commit message follows our guidelines: CONTRIBUTING.md#commit
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

```
[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[x] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:
```

## What is the new behavior?

We have upgraded to the latest version of Nx, 16.1

## Does this PR introduce a breaking change?

```
[ ] Yes
[x] No
```

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx", "etc", "rxjs", "rxjs-angular", "sonarjs", "ordered-imports"],
+  "plugins": ["@nx", "etc", "rxjs", "rxjs-angular", "sonarjs", "ordered-imports"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": ["{e2e,packages}/**/tsconfig.*?.json", "e2e/**/*-e2e/tsconfig.json"]
@@ -11,10 +11,11 @@
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "excludedFiles": ["*.spec.ts"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
+            "allowCircularSelfDependency": true,
             "allow": [],
             "depConstraints": [
               {
@@ -44,18 +45,18 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": "off"
+        "@nx/enforce-module-boundaries": "off"
       }
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {

.gitignore

@@ -40,3 +40,6 @@ testem.log
 Thumbs.db
 
 .angular/
+
+# Nx
+migrations.json

CONTRIBUTING.md

@@ -117,7 +117,7 @@ Once that's completed we can create our application with the corresponding gener
 
 Finally we MUST revert the changes made to the `nx.json` file.
 
-In cases where the application generator creates a companion e2e project, we need to move it to the `e2e` folder. This is done using the `@nrwl/workspace:move` generator.
+In cases where the application generator creates a companion e2e project, we need to move it to the `e2e` folder. This is done using the `@nx/workspace:move` generator.
 
 ```bash
 nx generate move [<grouping-folder>/]<e2e-project-directory-name> --project-name=<e2e-project-name>

decorate-angular-cli.js

@@ -27,10 +27,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);
 }

e2e/examples/lumberjack-app-e2e/cypress.config.ts

@@ -1,6 +1,8 @@
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname),
+  e2e: {
+    ...nxE2EPreset(__dirname),
+  },
 });

e2e/examples/lumberjack-app-e2e/project.json

@@ -5,11 +5,11 @@
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "dependsOn": [
         {
-          "projects": "dependencies",
-          "target": "build"
+          "target": "build",
+          "dependencies": true
         }
       ],
       "options": {
@@ -24,7 +24,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["e2e/examples/lumberjack-app-e2e/**/*.{js,ts}"]

jest.config.ts

@@ -1,4 +1,4 @@
-import { getJestProjects } from '@nrwl/jest';
+import { getJestProjects } from '@nx/jest';
 
 export default {
   projects: getJestProjects(),

jest.preset.js

@@ -1,8 +1,21 @@
-const nxPreset = require('@nrwl/jest/preset').default;
+const nxPreset = require('@nx/jest/preset').default;
 
 /**
  * We need to reset the mocks for each test to prevent the mocks being reused and affect the next test.
  *
  * For example in the lumberjack.service.spec.ts file some test were keeping the count of calls from previous usages of the spy.
  * */
-module.exports = { ...nxPreset, resetMocks: true };
+module.exports = {
+  ...nxPreset,
+  resetMocks: true,
+  /* TODO: Update to latest Jest snapshotFormat
+   * By default Nx has kept the older style of Jest Snapshot formats
+   * to prevent breaking of any existing tests with snapshots.
+   * It's recommend you update to the latest format.
+   * You can do this by removing snapshotFormat property
+   * and running tests with --update-snapshot flag.
+   * Example: "nx affected --targets=test --update-snapshot"
+   * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
+   */
+  snapshotFormat: { escapeString: true, printBasicPrototype: true },
+};

nx.json

@@ -5,30 +5,30 @@
     "defaultBase": "main"
   },
   "cli": {
-    "defaultCollection": "@nrwl/angular",
+    "defaultCollection": "@nx/angular",
     "packageManager": "yarn"
   },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "@nrwl/nx-cloud",
+      "runner": "nx-cloud",
       "options": {
         "cacheableOperations": ["build", "build-package", "lint", "test", "e2e"],
         "accessToken": "M2I0MTZlMmMtYmQ5ZC00ZDg1LWFjOTQtZjU5ZGFkYWM3YjM2fHJlYWQ="
       }
     }
   },
   "generators": {
-    "@nrwl/angular:application": {
+    "@nx/angular:application": {
       "style": "scss",
       "linter": "eslint",
       "unitTestRunner": "jest",
       "e2eTestRunner": "cypress"
     },
-    "@nrwl/angular:library": {
+    "@nx/angular:library": {
       "linter": "eslint",
       "unitTestRunner": "jest"
     },
-    "@nrwl/angular:component": {
+    "@nx/angular:component": {
       "style": "scss"
     }
   },
@@ -37,8 +37,8 @@
     "build": {
       "dependsOn": [
         {
-          "projects": "dependencies",
-          "target": "build"
+          "target": "build",
+          "dependencies": true
         }
       ],
       "inputs": ["production", "^production"]

package.json

@@ -12,7 +12,7 @@
     "delete-path-alias": "node tools/scripts/delete-path-alias.mjs",
     "e2e": "nx run-many --target=e2e --all --parallel=1",
     "format": "yarn nx format:write",
-    "lint": "nx workspace-lint && nx run-many --target=lint --all --max-warnings=0",
+    "lint": "nx run-many --target=lint --all --max-warnings=0",
     "ng": "nx",
     "nx": "nx",
     "start": "nx serve",
@@ -36,37 +36,38 @@
     "@angular/platform-browser": "15.0.3",
     "@angular/platform-browser-dynamic": "15.0.3",
     "@angular/router": "15.0.3",
-    "@nrwl/angular": "15.3.0",
-    "rxjs": "7.5.7",
+    "rxjs": "7.8.1",
     "tslib": "2.4.1",
-    "zone.js": "0.12.0"
+    "zone.js": "0.12.0",
+    "@nx/angular": "16.1.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "15.0.3",
-    "@angular-eslint/eslint-plugin": "15.1.0",
-    "@angular-eslint/eslint-plugin-template": "15.1.0",
-    "@angular-eslint/template-parser": "15.1.0",
+    "@angular-devkit/core": "15.0.3",
+    "@angular-devkit/schematics": "15.0.3",
+    "@angular-eslint/eslint-plugin": "16.0.1",
+    "@angular-eslint/eslint-plugin-template": "16.0.1",
+    "@angular-eslint/template-parser": "16.0.1",
     "@angular/cli": "15.0.3",
     "@angular/compiler-cli": "15.0.3",
     "@angular/language-service": "15.0.3",
     "@commitlint/cli": "17.3.0",
     "@commitlint/config-conventional": "17.3.0",
     "@jscutlery/semver": "2.29.2",
-    "@nrwl/cli": "15.3.0",
-    "@nrwl/cypress": "15.3.0",
-    "@nrwl/devkit": "15.3.0",
-    "@nrwl/eslint-plugin-nx": "15.3.0",
-    "@nrwl/jest": "15.3.0",
-    "@nrwl/linter": "15.3.0",
-    "@nrwl/nx-cloud": "15.0.2",
-    "@nrwl/workspace": "15.3.0",
+    "@nx/cypress": "16.1.0",
+    "@nx/devkit": "16.1.0",
+    "@nx/eslint-plugin": "16.1.0",
+    "@nx/jest": "16.1.0",
+    "@nx/linter": "16.1.0",
+    "@nx/workspace": "16.1.0",
+    "@schematics/angular": "15.0.3",
     "@types/copy": "0.3.2",
-    "@types/jest": "28.1.8",
+    "@types/jest": "29.4.4",
     "@types/node": "18.11.13",
-    "@typescript-eslint/eslint-plugin": "5.45.0",
-    "@typescript-eslint/parser": "5.45.0",
+    "@typescript-eslint/eslint-plugin": "5.59.2",
+    "@typescript-eslint/parser": "5.59.2",
     "copy": "0.3.2",
-    "cypress": "11.2.0",
+    "cypress": "^12.2.0",
     "eslint": "8.15.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-plugin-cypress": "2.12.1",
@@ -77,21 +78,22 @@
     "eslint-plugin-sonarjs": "0.17.0",
     "glob": "8.0.3",
     "husky": "8.0.2",
-    "jest": "28.1.3",
-    "jest-environment-jsdom": "28.1.3",
-    "jest-preset-angular": "12.2.3",
+    "jest": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
+    "jest-preset-angular": "13.0.0",
     "ng-packagr": "15.0.3",
     "ngx-deploy-npm": "4.3.10",
-    "nx": "15.3.0",
+    "nx": "16.1.0",
+    "nx-cloud": "16.0.5",
     "postcss": "8.4.18",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.5.0",
     "postcss-url": "10.1.3",
     "prettier": "2.8.1",
     "replace-in-file": "6.3.5",
     "rimraf": "3.0.2",
-    "ts-jest": "28.0.8",
+    "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "4.8.4"
+    "typescript": "4.8.2"
   }
 }

packages/examples/lumberjack-app/.eslintrc.json

@@ -4,7 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -26,7 +26,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

packages/examples/lumberjack-app/jest.config.ts

@@ -3,15 +3,16 @@ export default {
   displayName: 'examples-lumberjack-app',
   preset: '../../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-    },
-  },
+  globals: {},
   coverageDirectory: '../../../coverage/packages/examples/lumberjack-app',
   transform: {
-    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
   },
   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
   snapshotSerializers: [

packages/examples/lumberjack-app/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "examples-lumberjack-app",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "packages/examples/lumberjack-app/src",
@@ -49,8 +50,8 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "dependsOn": [
         {
-          "projects": "dependencies",
-          "target": "build"
+          "target": "build",
+          "dependencies": true
         }
       ],
       "configurations": {
@@ -70,7 +71,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["packages/examples/lumberjack-app/**/*.ts", "packages/examples/lumberjack-app/**/*.html"]
@@ -84,7 +85,7 @@
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "packages/examples/lumberjack-app/jest.config.ts",
@@ -100,6 +101,5 @@
       }
     }
   },
-  "tags": ["scope:internal", "type:app"],
-  "name": "examples-lumberjack-app"
+  "tags": ["scope:internal", "type:app"]
 }

packages/examples/lumberjack-app/src/app/nx-welcome.component.ts

@@ -645,10 +645,10 @@ import { Component, ViewEncapsulation } from '@angular/core';
               Add UI library
             </summary>
             <pre><span># Generate UI lib</span>
-nx g @nrwl/angular:lib ui
+nx g @nx/angular:lib ui
 
 <span># Add a component</span>
-nx g @nrwl/angular:component button --project ui</pre>
+nx g @nx/angular:component button --project ui</pre>
           </details>
           <details>
             <summary>

packages/internal/console-driver/test-util/.eslintrc.json

@@ -4,7 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -26,7 +26,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]