Add menu for navigation

Author: angularexample

README.md

@@ -12,11 +12,11 @@ comes with a LSP for Vim users.
 
 ## Start the application
 
-Run `npx nx serve angular-mfe-nx` to start the development server. Happy coding!
+Run `npx nx serve app-shell` to start the development server. Happy coding!
 
 ## Build for production
 
-Run `npx nx build angular-mfe-nx` to build the application. The build artifacts are stored in the output directory (e.g. `dist/` or `build/`), ready to be deployed.
+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
 
@@ -133,3 +133,6 @@ Change apps/app-shell/src/app/app.component.html
 <router-outlet></router-outlet>
 ```
 
+Change the HTML in the other two apps.
+
+Include the new UI Components.

apps/app-one/src/app/app.component.html

@@ -1,3 +1,4 @@
 <h2>App One</h2>
 <lib-ui-label></lib-ui-label>
+<lib-ui-button></lib-ui-button>
 <router-outlet></router-outlet>

apps/app-one/src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { UiLabelComponent } from '@angular-mfe-nx/ui';
+import { UiButtonComponent, UiLabelComponent } from '@angular-mfe-nx/ui';
 
 @Component({
   standalone: true,
-  imports: [RouterModule, UiLabelComponent],
+  imports: [RouterModule, UiLabelComponent, UiButtonComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

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

@@ -1,2 +1,10 @@
 <h1>App Shell</h1>
+<p>This demonstrates Angular MFE architecture using NX.</p>
+<p>This is the app-shell. It uses routing to load 2 remote MFE apps.</p>
+<p>All apps share a common UI Library that shows how to share UI components.</p>
+<ul>
+  <li><a routerLink="/">Home</a></li>
+  <li><a routerLink="/app-one">App One</a></li>
+  <li><a routerLink="/app-two">App Two</a></li>
+</ul>
 <router-outlet></router-outlet>