feat: add static federation examples for comparison

- comment based

Author: tomastrajan

apps/host-example/module-federation.config.js

@@ -1,4 +1,9 @@
 module.exports = {
   name: 'host-example',
+
+  // DYNAMIC FEDERATION
   remotes: [],
+
+  // STATIC FEDERATION
+  // remotes: ['remote-a', 'remote-b'],
 };

apps/host-example/src/app/app.component.html

@@ -9,7 +9,7 @@
         />
       </a>
       <span class="text-blue-700 text-2xl font-bold"
-        >Module Federation Example</span
+        >Module Federation Example 1</span
       >
       <span class="flex-1"></span>
       <a

apps/host-example/src/app/app.routes.ts

@@ -21,6 +21,7 @@ export const appRoutes: Route[] = [
         '@angular-experts/host-example/feature/dashboard-with-subroutes'
       ).then((m) => m.hostExampleFeatureDashboardWithSubroutesRoutes),
   },
+  // DYNAMIC FEDERATION
   {
     path: 'remote-a',
     loadChildren: () =>
@@ -31,4 +32,16 @@ export const appRoutes: Route[] = [
     loadChildren: () =>
       loadRemoteModule('remote-b', './Routes').then((m) => m.remoteRoutes),
   },
+
+  // STATIC FEDERATION
+  // {
+  //   path: 'remote-a',
+  //   loadChildren: () =>
+  //     import('@angular-experts/remote-a/feature/a').then((m) => m.remoteAFeatureARoutes),
+  // },
+  // {
+  //   path: 'remote-b',
+  //   loadChildren: () =>
+  //     import('@angular-experts/remote-b/feature/b').then((m) => m.remoteBFeatureBRoutes),
+  // },
 ];

apps/host-example/src/assets/module-federation.manifest.json

@@ -1,4 +1,4 @@
 {
-  "remote-a": "http://localhost:4201",
+  "remote-a": "http://B:indetifier@version",
   "remote-b": "http://localhost:4202"
 }

apps/host-example/src/main.ts

@@ -1,6 +1,11 @@
+// STATIC FEDERATION
+// import'./bootstrap';
+
+// DYNAMIC FEDERATION
 import { setRemoteDefinitions } from '@nx/angular/mf';
 
 fetch('/assets/module-federation.manifest.json')
   .then((res) => res.json())
   .then((definitions) => setRemoteDefinitions(definitions))
   .then(() => import('./bootstrap').catch((err) => console.error(err)));
+

libs/remote-a/feature/a/src/lib/remote-a-feature-a/remote-a-feature-a.component.ts

@@ -1,11 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { SharedUiDummyComponent } from '@angular-experts/shared/ui/dummy';
 
 @Component({
   selector: 'angular-experts-remote-a-feature-a',
   standalone: true,
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, SharedUiDummyComponent],
   template: `
     <h1 class="title">remote-a-feature-a works!</h1>
     <div class="flex gap-4 my-8" *ngIf="withRouting">
@@ -15,6 +17,7 @@ import { RouterModule } from '@angular/router';
       >
       <a class="btn" routerLinkActive="btn-active" routerLink="child">Child</a>
     </div>
+    <angular-experts-shared-ui-dummy />
     <router-outlet *ngIf="withRouting" />
   `,
   styles: [

libs/shared/ui/dummy/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "angularExperts",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "angular-experts",
+            "style": "kebab-case"
+          }
+        ]
+      },
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/shared/ui/dummy/README.md

@@ -0,0 +1,7 @@
+# shared-ui-dummy
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shared-ui-dummy` to execute the unit tests.

libs/shared/ui/dummy/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'shared-ui-dummy',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../../coverage/libs/shared/ui/dummy',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/shared/ui/dummy/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../../dist/libs/shared/ui/dummy",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}