feat(qwik-angular): angular 17 compatibility (#2)

* chore(qwik-angular): migrate to nx v17

* feat(qwik-angular): angular 17 compatibility

Author: dmitry-stepanenko

.gitignore

@@ -39,3 +39,5 @@ testem.log
 Thumbs.db
 
 .angular
+
+.nx/cache

.prettierignore

@@ -2,3 +2,5 @@
 /dist
 /coverage
 .angular
+
+/.nx/cache

.verdaccio/config.yml

@@ -4,8 +4,11 @@ storage: ../tmp/local-registry/storage
 # a list of other known repositories we can talk to
 uplinks:
   npmjs:
-    url: http://localhost:4873/
-    maxage: 60m
+    url: https://registry.npmjs.org/
+    cache: true
+  yarn:
+    url: https://registry.yarnpkg.com
+    cache: true
 
 packages:
   '**':
@@ -22,7 +25,8 @@ packages:
 logs:
   type: stdout
   format: pretty
-  level: warn
+  level: http
 
 publish:
   allow_offline: true # set offline to true to allow publish offline
+

nx.json

@@ -3,29 +3,26 @@
   "affected": {
     "defaultBase": "master"
   },
-  "tasksRunnerOptions": {
-    "default": {
-      "runner": "nx-cloud",
-      "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"],
-        "accessToken": "NmYxNjExYTQtNGQxOS00MjBlLWI0ODAtZTJiZDZhYjhmZGE5fHJlYWQtd3JpdGU="
-      }
-    }
-  },
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "inputs": ["production", "^production"],
+      "cache": true
     },
     "lint": {
       "inputs": [
         "default",
         "{workspaceRoot}/.eslintrc.json",
         "{workspaceRoot}/.eslintignore"
-      ]
+      ],
+      "cache": true
     },
     "test": {
-      "inputs": ["default", "^production"]
+      "inputs": ["default", "^production"],
+      "cache": true
+    },
+    "e2e": {
+      "cache": true
     }
   },
   "namedInputs": {
@@ -41,5 +38,6 @@
   "workspaceLayout": {
     "appsDir": "packages",
     "libsDir": "packages"
-  }
+  },
+  "nxCloudAccessToken": "NmYxNjExYTQtNGQxOS00MjBlLWI0ODAtZTJiZDZhYjhmZGE5fHJlYWQtd3JpdGU="
 }

package.json

@@ -7,44 +7,42 @@
   "devDependencies": {
     "@builder.io/qwik": "~1.2.6",
     "@builder.io/qwik-city": "~1.2.6",
-    "@nx/angular": "16.5.0",
-    "@nx/eslint-plugin": "16.5.0",
-    "@nx/js": "16.5.0",
-    "@nx/linter": "16.5.0",
-    "@nx/vite": "16.5.0",
-    "@nx/workspace": "16.5.0",
+    "@nx/angular": "17.1.1",
+    "@nx/eslint-plugin": "17.1.1",
+    "@nx/js": "17.1.1",
+    "@nx/vite": "17.1.1",
+    "@nx/workspace": "17.1.1",
     "@swc/cli": "~0.1.62",
-    "@swc/core": "~1.3.51",
+    "@swc/core": "1.3.96",
     "@types/node": "^18.16.1",
     "@types/yargs": "^17.0.24",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
     "@vitest/ui": "~0.32.0",
     "chalk": "^4.1.2",
-    "eslint": "~8.15.0",
-    "eslint-config-prettier": "8.1.0",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-plugin-qwik": "~1.2.6",
     "node-fetch": "~3.3.0",
-    "nx": "16.5.0",
-    "nx-cloud": "latest",
+    "nx": "17.1.1",
     "prettier": "^2.6.2",
-    "qwik-nx": "^1.0.8",
+    "qwik-nx": "^2.0.2",
     "rollup": "^3.27.1",
-    "sass": "~1.56.1",
     "tslib": "^2.3.0",
-    "typescript": "~5.1.3",
+    "typescript": "5.2.2",
     "undici": "^5.22.0",
     "verdaccio": "^5.0.4",
     "vite": "~4.4.0",
     "vite-plugin-dts": "~2.3.0",
     "vite-tsconfig-paths": "~4.2.0",
     "vitest": "~0.32.0",
-    "yargs": "^17.7.2"
+    "yargs": "^17.7.2",
+    "@nx/eslint": "17.1.1"
   },
   "nx": {
     "includedScripts": []
   },
   "dependencies": {
-    "@swc/helpers": "~0.5.0"
+    "@swc/helpers": "0.5.3"
   }
 }

packages/add-angular-to-qwik/README.md

@@ -2,6 +2,6 @@
 
 ## What is It?
 
-This is a simple utility package that allows runs an integration to add Angular to your existing Qwik application.
+This is a simple utility package that runs an integration to add Angular to your existing Qwik application.
 
 Run `npx add-angular-to-qwik@latest` to try it out!

packages/add-angular-to-qwik/bin/add-angular-to-qwik.ts

@@ -8,7 +8,7 @@ import {
   detectPackageManager,
 } from 'nx/src/utils/package-manager';
 import { output } from 'create-nx-workspace/src/utils/output';
-import { readFileSync, unlinkSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync, rmSync } from 'fs';
 import { execSync } from 'child_process';
 
 interface Arguments extends CreateWorkspaceOptions {
@@ -135,7 +135,8 @@ function getRelevantPackageManagerCommand() {
 }
 
 function cleanup(isQwikNxInstalled: boolean, uninstallCmd: string) {
-  unlinkSync('project.json');
+  rmSync('.nx', {force: true, recursive: true});
+  rmSync('project.json');
   if (!isQwikNxInstalled) {
     execSync(`${uninstallCmd} qwik-nx nx`, { stdio: [0, 1, 2] });
   }

packages/add-angular-to-qwik/package.json

@@ -24,7 +24,8 @@
   },
   "homepage": "https://github.com/QwikDev/qwik-angular",
   "peerDependencies": {
-    "qwik-nx": "^1.0.9"
+    "qwik-nx": "^2.0.2",
+    "create-nx-workspace": "17.1.1"
   },
   "publishConfig": {
     "access": "public",

packages/add-angular-to-qwik/project.json

@@ -45,12 +45,11 @@
             "glob": "LICENSE",
             "output": "/"
           }
-        ],
-        "updateBuildableProjectDepsInPackageJson": true
+        ]
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "packages/add-angular-to-qwik/**/*.ts",

packages/qwik-angular/package.json

@@ -28,19 +28,19 @@
   "types": "./index.qwik.d.ts",
   "dependencies": {
     "@analogjs/vite-plugin-angular": "~0.2.0",
-    "@angular-devkit/build-angular": "^16.0.0",
-    "@angular/animations": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler-cli": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-server": "^16.0.0",
+    "@angular-devkit/build-angular": "17.0.0",
+    "@angular/animations": "17.0.2",
+    "@angular/common": "17.0.2",
+    "@angular/compiler-cli": "17.0.2",
+    "@angular/compiler": "17.0.2",
+    "@angular/core": "17.0.2",
+    "@angular/platform-browser-dynamic": "17.0.2",
+    "@angular/platform-browser": "17.0.2",
+    "@angular/platform-server": "17.0.2",
     "@builder.io/qwik": "^1.2.11",
     "rxjs": "~7.8.0",
     "sass": "^1.60.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.2"
   },
   "exports": {
     ".": {

packages/qwik-angular/project.json

@@ -17,7 +17,7 @@
       "dependsOn": ["build"]
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["packages/qwik-angular/**/*.{ts,tsx,js,jsx}"]

packages/qwik-angular/src/lib/client.ts

@@ -12,7 +12,7 @@ import { createApplication } from '@angular/platform-browser';
 import { merge, Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { extractProjectableNodes } from './extract-projectable-nodes';
-import zoneJs from 'zone.js/dist/zone.min.js?url';
+import zoneJs from 'zone.js/plugins/zone.min?url';
 import { getAngularProps } from './slot';
 import { provideAnimations } from '@angular/platform-browser/animations';
 

packages/qwik-angular/src/lib/vite-plugin/vite.ts

@@ -54,10 +54,11 @@ function analogQwikPlugin(options: PluginOptions) {
             '@angular/platform-browser/animations',
             '@angular/compiler',
             '@angular/common',
+            '@angular/common/http',
             '@angular/animations',
             '@angular/animations/browser',
+            '@angular/platform-server',
           ],
-          exclude: ['@angular/platform-server'],
         },
       };
     },

packages/qwik-angular/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 import { Plugin, defineConfig } from 'vite';
 
-import viteTsConfigPaths from 'vite-tsconfig-paths';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import dts from 'vite-plugin-dts';
 import * as path from 'path';
 import { qwikVite } from '@builder.io/qwik/optimizer';
@@ -18,9 +18,7 @@ export default defineConfig({
       skipDiagnostics: true,
     }),
 
-    viteTsConfigPaths({
-      root: '../../',
-    }),
+    nxViteTsPaths(),
     vitePluginFixBundle(),
   ],