feat: Nx 20.3+ with Angular 19 support with optional zoneless (#82)

Author: NathanWalker

migrations.json

@@ -1,12 +1,42 @@
 {
   "migrations": [
     {
-      "version": "20.0.1",
-      "description": "Set `useLegacyCache` to true for migrating workspaces",
-      "implementation": "./src/migrations/update-20-0-1/use-legacy-cache",
-      "x-repair-skip": true,
-      "package": "nx",
-      "name": "use-legacy-cache"
+      "version": "20.2.0-beta.5",
+      "description": "Update TypeScript ESLint packages to v8.13.0 if they are already on v8",
+      "implementation": "./src/migrations/update-20-2-0/update-typescript-eslint-v8-13-0",
+      "package": "@nx/eslint",
+      "name": "update-typescript-eslint-v8.13.0"
+    },
+    {
+      "version": "20.3.0-beta.1",
+      "description": "Update ESLint flat config to include .cjs, .mjs, .cts, and .mts files in overrides (if needed)",
+      "implementation": "./src/migrations/update-20-3-0/add-file-extensions-to-overrides",
+      "package": "@nx/eslint",
+      "name": "add-file-extensions-to-overrides"
+    },
+    {
+      "cli": "nx",
+      "version": "20.2.0-beta.2",
+      "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
+      "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package",
+      "package": "@nx/angular",
+      "name": "update-20-2-0-update-module-federation-config-import"
+    },
+    {
+      "cli": "nx",
+      "version": "20.2.0-beta.2",
+      "description": "Update the withModuleFederation import use @nx/module-federation/angular.",
+      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package",
+      "package": "@nx/angular",
+      "name": "update-20-2-0-update-with-module-federation-import"
+    },
+    {
+      "cli": "nx",
+      "version": "20.3.0-beta.2",
+      "description": "If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.",
+      "factory": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package",
+      "package": "@nx/angular",
+      "name": "ensure-nx-module-federation-package"
     }
   ]
 }

package.json

@@ -31,21 +31,22 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/core": "~18.2.0",
-    "@nx/angular": "20.0.3",
-    "@nx/devkit": "20.0.3",
-    "@nx/eslint": "20.0.3",
-    "@nx/eslint-plugin": "20.0.3",
-    "@nx/express": "20.0.3",
-    "@nx/jest": "20.0.3",
-    "@nx/js": "20.0.3",
-    "@nx/plugin": "20.0.3",
-    "@nx/web": "20.0.3",
-    "@nx/workspace": "20.0.3",
+    "@angular-devkit/core": "~19.0.0",
+    "@nx/angular": "20.3.0",
+    "@nx/devkit": "20.3.0",
+    "@nx/eslint": "20.3.0",
+    "@nx/eslint-plugin": "20.3.0",
+    "@nx/express": "20.3.0",
+    "@nx/jest": "20.3.0",
+    "@nx/js": "20.3.0",
+    "@nx/plugin": "20.3.0",
+    "@nx/web": "20.3.0",
+    "@nx/workspace": "20.3.0",
     "@types/fs-extra": "^11.0.3",
     "@types/jest": "29.5.13",
     "@types/node": "^20.0.0",
     "@types/plist": "^3.0.2",
+    "@typescript-eslint/utils": "^8.13.0",
     "conventional-changelog-cli": "^5.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "doctoc": "^2.0.0",
@@ -56,7 +57,7 @@
     "fast-xml-parser": "^4.5.0",
     "fs-extra": "^11.2.0",
     "jest": "29.7.0",
-    "nx": "20.0.3",
+    "nx": "20.3.0",
     "nx-cloud": "19.1.0",
     "plist": "^3.1.0",
     "prettier": "^3.3.0",
@@ -67,4 +68,3 @@
   },
   "dependencies": {}
 }
-

packages/nx/README.md

@@ -21,10 +21,10 @@ If updating from Nx <= 19 to >=20, [see the migration guide](https://github.com./
 - [NativeScript Plugin for Nx](#nativescript-plugin-for-nx)
   - [Table of Contents](#table-of-contents)
   - [Getting started](#getting-started)
-    - [Create a new Nx workspace](#create-a-new-nx-workspace)
-    - [Init workspace](#init-workspace)
-    - [Install NativeScript plugin](#install-nativescript-plugin)
-    - [Create an app](#create-an-app)
+    - [1. Create a new Nx workspace](#1-create-a-new-nx-workspace)
+    - [2. Init workspace](#2-init-workspace)
+    - [3. Install NativeScript plugin](#3-install-nativescript-plugin)
+    - [4. Create an app](#4-create-an-app)
       - [`--framework [angular|vanilla]`](#--framework-angularvanilla)
       - [`--groupByName`](#--groupbyname)
       - [Develop on simulators and devices](#develop-on-simulators-and-devices)
@@ -44,42 +44,33 @@ If updating from Nx <= 19 to >=20, [see the migration guide](https://github.com./
 
 ## Getting started
 
-### Create a new Nx workspace
+### 1. Create a new Nx workspace
 
 ```sh
 # Using npm
-npx create-nx-workspace@latest
+npx create-nx-workspace@latest --preset=apps
 
 # Using yarn
-yarn create-nx-workspace@latest
+yarn create-nx-workspace@latest --preset=apps
 ```
 
-At the prompts, you can use:
+The prompts may vary with different Nx versions, but for the following you can use:
 
 ```sh
 ✔ Where would you like to create your workspace? · {your-workspace-name}
 
-? Which stack do you want to use? … 
-None:          Configures a minimal structure without specific frameworks or technologies.
-# Choose "None"
-
-? Package-based monorepo, integrated monorepo, or standalone project?
-Integrated Monorepo:        Nx creates a monorepo that contains multiple projects.
-# Choose "Integrated"
-
-? Do you want Nx Cloud to make your CI fast? 
-# Choice is completely up to you
+? Which CI provider would you like to use? … {your choice}
 ```
 
-### Init workspace
+### 2. Init workspace
 
 Initialize a TypeScript project -- This will ensure a `tsconfig.base.json` is created to begin building your workspace.
 
 ```sh
 npx nx g @nx/js:init
 ```
 
-### Install NativeScript plugin
+### 3. Install NativeScript plugin
 
 ```sh
 # Using npm
@@ -99,7 +90,7 @@ npm WARN node_modules/@swc/core
 npm WARN   peer @swc/core@">= 1.3" from @swc-node/[email protected]
 ```
 
-### Create an app
+### 4. Create an app
 
 ```sh
 # Using npm
@@ -109,6 +100,9 @@ npx nx g @nativescript/nx:app <app-name> [...options]
 yarn nx g @nativescript/nx:app <app-name> [...options]
 ```
 
+**NOTE**: It's recommended to put inside an `apps` folder for good organization, eg: `apps/nativescript-<app-name>`.
+You can use further subfolders if you prefer as well.
+
 This will generate: 
 
 ```
@@ -144,13 +138,13 @@ apps/<app-name>-nativescript
 **Android:**
 
 ```sh
-npx nx run <app-name>:android
+npx nx debug <app-name> android
 ```
 
 **iOS:** (Mac only)
 
 ```sh
-npx nx run <app-name>:ios
+npx nx debug <app-name> ios
 ```
 
 #### Configuration options
@@ -268,7 +262,7 @@ Here's an example app config:
         }
       },
       "configurations": {
-        "production": {
+        "prod": {
           "production": true,
           "release": true,
           "android": {
@@ -434,7 +428,7 @@ npx nx build <app-name> android --c=prod \
 **iOS:** (Mac only)
 
 ```sh
-npx nx build <app-name> iod --c=prod
+npx nx build <app-name> ios --c=prod
 ```
 
 As mentioned, you can pass any additional NativeScript CLI options as flags on the end of your nx build command:

packages/nx/src/generators/application/application.ts

@@ -36,9 +36,9 @@ export async function applicationGenerator(tree: Tree, schema: ApplicationSchema
 
   createFiles(tree, options);
   // add extra files per options
-  if (options.routing && ['angular'].includes(options.framework)) {
-    createFiles(tree, options, 'routing');
-  }
+  // if (options.routing && ['angular'].includes(options.framework)) {
+  //   createFiles(tree, options, 'routing');
+  // }
   // add app resources
   appResources(tree, {
     path: options.projectRoot,

packages/nx/src/generators/application/files_angular/__dot__gitignore

@@ -9,6 +9,7 @@ platforms/
 !eslint.config.js
 !ngcc.config.js
 !webpack.config.js
+!tailwind.config.js
 !jest.config.js
 *.css
 

packages/nx/src/generators/application/files_angular/package.json

@@ -3,14 +3,12 @@
   "main": "./src/main.ts",
   "license": "SEE LICENSE IN <your-license-filename>",
   "version": "0.0.0",
-  "scripts": {
-    "postinstall": "node ./tools/postinstall.js"
-  },
   "dependencies": {
     "@nativescript/core": "*"
   },
   "devDependencies": {
     "@nativescript/android": "<%= nsAndroidRuntimeVersion %>",
-    "@nativescript/ios": "<%= nsIOSRuntimeVersion %>"
+    "@nativescript/ios": "<%= nsIOSRuntimeVersion %>",
+    "@nativescript/tailwind": "<%= nsTailwindVersion %>"
   }
 }

packages/nx/src/generators/application/files_angular/src/app.android.scss

@@ -1,3 +1,4 @@
-<% if (routing) { %><GridLayout> <page-router-outlet></page-router-outlet> </GridLayout><% } else { %>
-<ActionBar title="My App" class="action-bar"> </ActionBar>
-<StackLayout class="page p-20"> <Label text="Hello" class="h1 text-center c-white"></Label> </StackLayout><% } %>
+<GridLayout>
+    <page-router-outlet></page-router-outlet>
+</GridLayout>
+  

packages/nx/src/generators/application/files_angular/src/app.component.html

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { PageRouterOutlet } from '@nativescript/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html'
+  selector: 'ns-app',
+  templateUrl: './app.component.html',
+  imports: [PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
 })
-export class AppComponent {
-
-}
+export class AppComponent {}

packages/nx/src/generators/application/files_angular/src/app.component.ts__tmpl__

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/nx/src/generators/application/files_angular/src/app.css

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './features/home/home.component';
+import { DetailComponent } from './features/detail/detail.component';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent },
+  { path: 'item/:id', component: DetailComponent },
+];

packages/nx/src/generators/application/files_angular/src/app.ios.scss

@@ -0,0 +1,42 @@
+import { Injectable, signal } from '@angular/core'
+
+export interface Item {
+  id: number
+  name: string
+  role: string
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ItemService {
+  items = signal<Item[]>([
+    { id: 1, name: 'NativeScript', role: 'Technology' },
+    { id: 2, name: 'Ter Stegen', role: 'Goalkeeper' },
+    { id: 3, name: 'Piqué', role: 'Defender' },
+    { id: 4, name: 'I. Rakitic', role: 'Midfielder' },
+    { id: 5, name: 'Sergio', role: 'Midfielder' },
+    { id: 6, name: 'Denis Suárez', role: 'Midfielder' },
+    { id: 7, name: 'Arda', role: 'Midfielder' },
+    { id: 8, name: 'A. Iniesta', role: 'Midfielder' },
+    { id: 9, name: 'Suárez', role: 'Forward' },
+    { id: 10, name: 'Messi', role: 'Forward' },
+    { id: 11, name: 'Neymar', role: 'Forward' },
+    { id: 12, name: 'Rafinha', role: 'Midfielder' },
+    { id: 13, name: 'Cillessen', role: 'Goalkeeper' },
+    { id: 14, name: 'Mascherano', role: 'Defender' },
+    { id: 17, name: 'Paco Alcácer', role: 'Forward' },
+    { id: 18, name: 'Jordi Alba', role: 'Defender' },
+    { id: 19, name: 'Digne', role: 'Defender' },
+    { id: 20, name: 'Sergi Roberto', role: 'Midfielder' },
+    { id: 21, name: 'André Gomes', role: 'Midfielder' },
+    { id: 22, name: 'Aleix Vidal', role: 'Midfielder' },
+    { id: 23, name: 'Umtiti', role: 'Defender' },
+    { id: 24, name: 'Mathieu', role: 'Defender' },
+    { id: 25, name: 'Masip', role: 'Goalkeeper' }
+  ]);
+
+  getItem(id: number): Item {
+    return this.items().find((item) => item.id === id)
+  }
+}

packages/nx/src/generators/application/files_angular/src/app.module.ts__tmpl__

@@ -0,0 +1,9 @@
+<ActionBar title="Details"></ActionBar>
+
+<FlexboxLayout flexDirection="column">
+  <FlexboxLayout class="m-4">
+    <Label class="text-3xl text-gray-400" [text]="item()?.id + '. '"></Label>
+    <Label class="text-3xl" [text]="item()?.name"></Label>
+  </FlexboxLayout>
+  <Label class="text-xl m-4" [text]="item()?.role"></Label>
+</FlexboxLayout>