Upgrade to Nx 18 and Align Configs

.eslintrc.base.json

@@ -0,0 +1,48 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": { "@typescript-eslint/no-explicit-any": "warn" }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "env": {
+        "jest": true
+      },
+      "rules": {}
+    },
+    {
+      "files": "*.json",
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
+    }
+  ]
+}

.eslintrc.json

@@ -1,12 +1,9 @@
 {
-  "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@typescript-eslint/no-explicit-any": "warn",
         "@nx/enforce-module-boundaries": [
           "error",
           {
@@ -24,18 +21,24 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
-      "rules": { "@typescript-eslint/no-explicit-any": "warn" }
+      "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "env": {
+        "jest": true
+      },
       "rules": {}
     },
     {
       "files": "*.json",
       "parser": "jsonc-eslint-parser",
       "rules": {}
     }
-  ]
+  ],
+  "extends": ["./.eslintrc.base.json"]
 }

.gitignore

@@ -1,12 +1,12 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
-/tmp
+dist
+tmp
 /out-tsc
 
 # dependencies
-/node_modules
+node_modules
 
 # IDEs and editors
 /.idea
@@ -25,7 +25,6 @@
 !.vscode/extensions.json
 
 # misc
-/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -39,6 +38,5 @@ testem.log
 .DS_Store
 Thumbs.db
 
+.nx/cache
 .angular
-
-.nx/cache

.prettierignore

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

apps/mfe1-e2e/project.json

@@ -19,10 +19,7 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["apps/mfe1-e2e/**/*.{js,ts}"]
-      }
+      "outputs": ["{options.outputFile}"]
     }
   },
   "tags": [],

apps/mfe1/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": ["../../.eslintrc.json", "../../.eslintrc.base.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
@@ -13,15 +13,15 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "angularArchitects",
+            "prefix": "mfe1",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "angular-architects",
+            "prefix": "mfe1",
             "style": "kebab-case"
           }
         ]

apps/mfe1/federation.config.js

@@ -19,4 +19,12 @@ module.exports = withNativeFederation({
   },
 
   sharedMappings: ['@angular-architects/playground-lib'],
+
+  skip: [
+    'rxjs/ajax',
+    'rxjs/fetch',
+    'rxjs/testing',
+    'rxjs/webSocket',
+    // Add further packages you don't need at runtime
+  ],
 });

apps/mfe1/jest.config.ts

@@ -3,7 +3,6 @@ export default {
   displayName: 'mfe1',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {},
   coverageDirectory: '../../coverage/apps/mfe1',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/mfe1/project.json

@@ -2,17 +2,47 @@
   "name": "mfe1",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "prefix": "mfe1",
   "sourceRoot": "apps/mfe1/src",
-  "prefix": "angular-architects",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-architects/native-federation:build",
+      "options": {},
+      "configurations": {
+        "production": {
+          "target": "mfe1:esbuild:production"
+        },
+        "development": {
+          "target": "mfe1:esbuild:development",
+          "dev": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-architects/native-federation:build",
+      "options": {
+        "target": "mfe1:serve-original:development",
+        "rebuildDelay": 0,
+        "dev": true,
+        "port": 0
+      }
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "mfe1:build"
+      }
+    },
+    "esbuild": {
+      "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/mfe1",
         "index": "apps/mfe1/src/index.html",
-        "main": "apps/mfe1/src/main.ts",
-        "polyfills": "apps/mfe1/src/polyfills.ts",
+        "browser": "apps/mfe1/src/main.ts",
+        "polyfills": ["zone.js", "es-module-shims"],
         "tsConfig": "apps/mfe1/tsconfig.app.json",
         "assets": ["apps/mfe1/src/favicon.ico", "apps/mfe1/src/assets"],
         "styles": ["apps/mfe1/src/styles.css"],
@@ -32,56 +62,30 @@
               "maximumError": "4kb"
             }
           ],
-          "fileReplacements": [
-            {
-              "replace": "apps/mfe1/src/environments/environment.ts",
-              "with": "apps/mfe1/src/environments/environment.prod.ts"
-            }
-          ],
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
-          "sourceMap": true,
-          "namedChunks": true
+          "sourceMap": true
         }
       },
       "defaultConfiguration": "production"
     },
-    "serve": {
+    "serve-original": {
       "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "port": 4201
+      },
       "configurations": {
         "production": {
-          "buildTarget": "mfe1:build:production"
+          "buildTarget": "mfe1:esbuild:production"
         },
         "development": {
-          "buildTarget": "mfe1:build:development"
+          "buildTarget": "mfe1:esbuild:development"
         }
       },
       "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "mfe1:build"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "options": {
-        "lintFilePatterns": ["apps/mfe1/**/*.ts", "apps/mfe1/**/*.html"]
-      }
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/apps/mfe1"],
-      "options": {
-        "jestConfig": "apps/mfe1/jest.config.ts"
-      }
     }
-  },
-  "tags": []
+  }
 }

apps/mfe1/src/app/app.component.html

@@ -1 +1,2 @@
-<angular-architects-nx-welcome></angular-architects-nx-welcome>
+<mfe1-nx-welcome></mfe1-nx-welcome>
+<router-outlet></router-outlet>

apps/mfe1/src/app/app.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  selector: 'angular-architects-root',
+  standalone: true,
+  imports: [NxWelcomeComponent, RouterModule],
+  selector: 'mfe1-app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'mfe1';

apps/mfe1/src/app/app.config.ts

@@ -0,0 +1,7 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(appRoutes)],
+};

apps/mfe1/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];

apps/mfe1/src/app/demo/demo.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 
 @Component({
   standalone: true,
-  selector: 'angular-architects-demo',
+  selector: 'mfe1-demo',
   templateUrl: './demo.component.html',
   styleUrls: ['./demo.component.css'],
   imports: [CommonModule, PlaygroundLibModule],