May 2024

In Angular development, creating reusable shared modules is a powerful way to encapsulate common functionality, UI components, services, and styles that can be used across different projects or repositories. In this guide, we’ll walk through the process of creating a reusable shared module from scratch, covering directory structures, component/service/directive creation, shared styles, and both development (npm link) and production (npm publish) use cases. Companion resource Companion Project Try the working example in your browser or inspect the full source code behind this article. github.com/omidfarhang/example-projects/examples/angular-shared-library-workspace Open live demo View on GitHub Step 1: Generate a Library The first step is to generate an Angular library project within your workspace using the Angular CLI: ...

This is the companion for Why and How. It proves one thing: a host page can load separately built Angular and React bundles as custom elements, pass a message attribute down, and take a microfrontend:message event back. It does not prove Module Federation, independent production deploys, or a shared design system. npm run dev builds the remotes, then starts one Qwik server that serves them from public/mfes/. Rust WebAssembly is a shell helper for CPU work, not a fourth micro frontend. ...

Once you have a reason to split the UI, the next decision is how the pieces become one page. That assembly step is composition: the host application — the shell — decides where each slice renders and what it is allowed to see. There are a few honest ways to do it. I picked one for the companion: the browser loads separately built bundles and mounts them as custom elements — HTML tags the host did not compile. That is client-side composition. It is not the only option, and it is not a production platform by itself. ...

A micro frontend is a slice of a web UI that one team can build, test, and ship without waiting on the rest of the page. Picture two teams and two pipelines on one checkout: catalog can go out on Tuesday while payments is still in review. That independence is the whole reason to do this. It is also the cost. Someone still has to own the page those slices land on, and someone has to keep the agreement between them from rotting. ...