create-mfe

Name: create-mfe
Availability: InStock
Author: chrisjwalk

Create and wire a new micro-frontend in an Nx + Angular workspace.

71|28|Updated Dec 30, 2017

Search Tags:#angular #vite #workspaces #nx #micro-frontend #module-federation #mfe

Ready to run

npx skills add https://github.com/chrisjwalk/angular-cli-netcore-ngrx-starter --skill create-mfe

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-mfe
Source: https://github.com/chrisjwalk/angular-cli-netcore-ngrx-starter/tree/main/.claude/skills/create-mfe
Command: npx skills add https://github.com/chrisjwalk/angular-cli-netcore-ngrx-starter --skill create-mfe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines adding a new micro-frontend (MFE) to an Nx + Angular workspace by consolidating remote host wiring, Module Federation setup, and deployment steps into a repeatable pattern.

Core Features & Use Cases

Provides a proven blueprint for creating a new remote app, exposing feature routes, and wiring them into a host.
Covers vite.config setup, shared singletons, NG0912 prevention, test stubs, CI/deployment, and end-to-end validation.
Supports optional resources (scripts, references, assets) as needed by the workflow.

Quick Start

Execute the recommended steps to create and integrate a new micro-frontend (MFE) into the workspace.

Frequently Asked Questions about create-mfe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add a new micro-frontend to an Nx Angular workspace?▼

Adding a new micro-frontend to an Nx Angular workspace involves creating a remote app, configuring Module Federation in vite.config, exposing feature routes, and wiring the remote into the host application.

What's the best way to configure shared singletons in a Vite Module Federation setup?▼

Configuring shared singletons in a Vite Module Federation setup requires defining shared dependencies in vite.config to prevent duplication and avoid circular dependency issues across remote and host apps.

Does this micro-frontend approach support Analog.js with Vite?▼

Yes, this micro-frontend approach supports Analog.js with Vite, providing a blueprint for vite.config setup, shared singletons, and NG0912 prevention within an Nx monorepo environment.

Why does NG0912 error occur in Angular micro-frontends and how can I prevent it?▼

The NG0912 error in Angular micro-frontends occurs due to shared dependency mismatches. You can prevent it by correctly configuring shared singletons and dependency injection scopes across the host and remote apps.

How do I set up CI and deployment for Nx Angular micro-frontends?▼

Setting up CI and deployment for Nx Angular micro-frontends involves configuring build pipelines for each remote app, validating end-to-end checks, and ensuring proper test stubs are in place.