AngularMfeNx

✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨

Integrate with editors

Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Start the application

Run npx nx serve app-shell to start the development server. Happy coding!

Build for production

Run npx nx build app-shell to build the application. The build artifacts are stored in the output directory (e.g. dist/ or build/), ready to be deployed.

Running tasks

To execute tasks with Nx use the following syntax:

npx nx <target> <project> <...options>

You can also run multiple targets:

npx nx run-many -t <target1> <target2>

..or add -p to filter specific projects

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Set up CI!

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

• Set up remote caching
• Set up task distribution across multiple machines
• Learn more how to setup CI

Explore the project graph

Run npx nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.

• Learn more about Exploring the Project Graph

Connect with us!

• Join the community
• Subscribe to the Nx Youtube Channel
• Follow us on Twitter

Follow This Article

Following this article:

https://medium.com/@disa2aka/building-modular-web-applications-a-guide-to-microfrontend-architecture-with-nx-and-angular-a5f0b397dce8

Create app-shell

npx nx generate @nrwl/angular:app apps/app-shell --style=scss --routing=true --e2eTestRunner=cypress --bundler=webpack --ssr=false

Run "nx show project app-shell" to view details about this project.

To run app-shell

nx run app-shell:serve

Create 2 MFE apps

npx nx generate @nrwl/angular:app apps/app-one --style=scss --routing=true --e2eTestRunner=cypress --bundler=webpack --ssr=false;npx nx generate @nrwl/angular:app apps/app-two --style=scss --routing=true --e2eTestRunner=cypress --bundler=webpack --ssr=false

This will create app-one and app-two

Create UI Library with button and label

npx nx generate @nrwl/angular:lib ui --directory=libs/ui;npx nx generate @nrwl/angular:component ui-button --directory=libs/ui/src/lib/ui-button --export;npx nx generate @nrwl/angular:component ui-label --directory=libs/ui/src/lib/ui-label --export

Accept the default options.

Add aliases

Add aliases for apps to paths in tsconfig.base.json.

      "@angular-mfe-nx/app-two/*": ["apps/app-two/src/app/*"],
      "@angular-mfe-nx/ui": ["libs/ui/src/index.ts"]

Add Routes for apps

Note: ESLint error needs override:

export const appRoutes: Route[] = [
  {
    path: 'app-one',
    // eslint-disable-next-line @nx/enforce-module-boundaries
    loadComponent: () => import('@angular-mfe-nx/app-one/app.component').then(m => m.AppComponent)
  },
  {
    path: 'app-two',
    // eslint-disable-next-line @nx/enforce-module-boundaries
    loadComponent: () => import('@angular-mfe-nx/app-two/app.component').then(m => m.AppComponent)
  },
];

Replace default HTML

Change apps/app-shell/src/app/app.component.html

<h1>App Shell</h1>
<router-outlet></router-outlet>

Change the HTML in the other two apps.

Include the new UI Components.