{"id":28436228,"url":"https://github.com/eurusik/nx-mf-remote-loader-generator","last_synced_at":"2025-06-14T03:03:38.792Z","repository":{"id":296416701,"uuid":"993345499","full_name":"eurusik/nx-mf-remote-loader-generator","owner":"eurusik","description":"Nx generator to create and expose remote components with SSR support, designed to work with ngx-mf-remote-loader.","archived":false,"fork":false,"pushed_at":"2025-05-30T20:16:08.000Z","size":160,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-30T21:44:13.052Z","etag":null,"topics":["generator","module-federation","nx","ssr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eurusik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-30T16:20:48.000Z","updated_at":"2025-05-30T20:16:11.000Z","dependencies_parsed_at":"2025-05-30T21:48:31.601Z","dependency_job_id":"70dbe4fc-1255-4df5-a8dd-141e5007b714","html_url":"https://github.com/eurusik/nx-mf-remote-loader-generator","commit_stats":null,"previous_names":["eurusik/nx-mf-remote-loader-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eurusik/nx-mf-remote-loader-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fnx-mf-remote-loader-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fnx-mf-remote-loader-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fnx-mf-remote-loader-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fnx-mf-remote-loader-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eurusik","download_url":"https://codeload.github.com/eurusik/nx-mf-remote-loader-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fnx-mf-remote-loader-generator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259751950,"owners_count":22905966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generator","module-federation","nx","ssr"],"created_at":"2025-06-05T21:42:03.510Z","updated_at":"2025-06-14T03:03:38.785Z","avatar_url":"https://github.com/eurusik.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Angular"],"readme":"# NX Module Federation Remote Component Generator\n\nA Nx generator for creating and exposing remote components with SSR support in Module Federation. This generator works in conjunction with `ngx-mf-remote-loader` to provide seamless SSR support for remote components.\n\n## Features\n\n- Creates Angular components that can be exposed via Module Federation\n- Configures components for server-side rendering (SSR) support\n- Automatically registers components with the remote loader\n- Adds type declarations for better TypeScript support\n\n## Prerequisites\n\nThis generator is designed to work with the [`ngx-mf-remote-loader`](https://github.com/eurusik/ngx-mf-remote-loader) package, which provides server-side rendering support for Module Federation remote components.\n\n## Usage\n\n```bash\nnx g nx-mf-remote-loader-generator:remoteComponent \\\n  --remote=my-remote-app \\\n  --name=MyComponent \\\n  --selector=my-remote-component\n```\n\n### Generator Options\n\n| Option | Description | Type | Default |\n|--------|-------------|------|---------|\n| `remote` | Remote application to add component to | string | *required* |\n| `name` | Name under which the component will be exposed | string | *required* |\n| `selector` | Selector for the remote component | string | `remote-component` |\n| `displayBlock` | Add `:host { display: block; }` to styles | boolean | `false` |\n| `style` | Style file extension/preprocessor | `css`, `scss`, `sass`, `less`, `none` | `none` |\n| `inlineTemplate` | Use inline template in component.ts | boolean | `false` |\n| `changeDetection` | Change detection strategy | `Default`, `OnPush` | `OnPush` |\n| `remoteLoaderProject` | Name of the remote loader project | string | `ngx-mf-remote-loader` |\n\n## Important: Workspace Project Requirement\n\n**This generator requires an Nx project named 'ngx-mf-remote-loader' in your workspace**. Simply installing the npm package is not sufficient, as the generator needs to modify project source files.\n\nIf the project is not found, the generator will skip the remote loader configuration with a warning message.\n\n## How It Works\n\nWhen you run the generator, it:\n\n1. Creates a new Angular component in the specified remote application\n2. Configures the component to be exposed via Module Federation\n3. Updates the remote application's TypeScript configuration\n4. Adds the component to the remote loader server for SSR support\n5. Adds type declarations for the remote component\n\n## Creating Your Own Remote Loader Implementation\n\nYou need to create your own implementation of the remote loader while using the interfaces from `ngx-mf-remote-loader`. This gives you more control while ensuring compatibility with the generator.\n\n### Step 1: Create a library in your Nx workspace\n\n```bash\nnx g @nx/angular:library my-remote-loader --buildable\n```\n\n### Step 2: Implement the browser loader\n\n```typescript\n// libs/my-remote-loader/src/lib/remote-loader-browser.ts\nimport { loadRemoteModule } from '@nx/angular/mf';\nimport { RemoteLoader } from 'ngx-mf-remote-loader';\n\nexport class RemoteLoaderBrowser extends RemoteLoader {\n  load(remoteName: string, remoteModule: string): Promise\u003cany\u003e {\n    return loadRemoteModule(remoteName, './' + remoteModule).then((m) =\u003e {\n      return remoteModule === 'Module' ? m.RemoteEntryModule : m;\n    });\n  }\n}\n```\n\n### Step 3: Implement the server-side loader\n\n```typescript\n// libs/my-remote-loader/src/lib/remote-loader-server.ts\nimport { RemoteLoader } from 'ngx-mf-remote-loader';\n\nexport class RemoteLoaderServer extends RemoteLoader {\n  private moduleRegistry: Record\u003cstring, () =\u003e Promise\u003cany\u003e\u003e = {};\n\n  registerRemoteModule(remoteName: string, moduleName: string, importFn: () =\u003e Promise\u003cany\u003e) {\n    this.moduleRegistry[remoteName + moduleName] = importFn;\n  }\n\n  load(remoteName: string, remoteModule: string): Promise\u003cany\u003e {\n    const key = remoteName + remoteModule;\n    // DefaultClause\n    throw new Error(`Remote module ${remoteName}/${remoteModule} not found`);\n  }\n}\n```\n\n### Step 4: Create a remotes.d.ts file\n\n```typescript\n// libs/my-remote-loader/src/lib/remotes.d.ts\n// Type declarations for remote modules will be added here by the generator\n```\n\n### Step 5: Export your implementations\n\n```typescript\n// libs/my-remote-loader/src/index.ts\n// We only export our custom implementations\nexport * from './lib/remote-loader-browser';\nexport * from './lib/remote-loader-server';\n\nexport function remoteLoader(remoteName: string) {\n  return () =\u003e import('./lib/remote-loader-component').then(\n    (m) =\u003e m.createRemoteModule(remoteName)\n  );\n}\n```\n\n### Step 6: Use your implementation via dependency injection\n\n```typescript\n// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n// Still import from ngx-mf-remote-loader - your implementation will be used through DI\nimport { RemoteLoader } from 'ngx-mf-remote-loader';\n// Import your custom implementation\nimport { RemoteLoaderBrowser } from './path-to-your-implementation';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule],\n  providers: [\n    {\n      provide: RemoteLoader,\n      useClass: RemoteLoaderBrowser\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n### Step 7: Generate components with your custom library\n\n```bash\nnx g nx-mf-remote-loader-generator:remoteComponent \\\n  --remote=my-remote-app \\\n  --name=MyComponent \\\n  --remoteLoaderProject=my-remote-loader\n```\n\nWith this approach, your application uses the `ngx-mf-remote-loader` interfaces, but your custom implementation is injected at runtime.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feurusik%2Fnx-mf-remote-loader-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feurusik%2Fnx-mf-remote-loader-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feurusik%2Fnx-mf-remote-loader-generator/lists"}