Creating the walking skeleton

Using the site map we created for LemonMart earlier in the chapter, we need to create the walking skeleton navigation experience for the app. To create this experience, we must create some buttons to link all modules and components together. We will go at this module by module.

Before we start, update the Login button on HomeComponent to navigate to the 'manager' path using the routerLink attribute and rename the button:

src/app/home/home.component.ts
  ...
  <button mat-raised-button color="primary" routerLink="/manager">
    Login as Manager
  </button>
  ...

Now, we can navigate to the ManagerHome component by clicking on the Login button.

The manager module

Since we already enabled lazy loading for ManagerModule, let’s go ahead and complete the rest of the navigational elements for it.

In the current setup, ManagerHomeComponent renders in <router-outlet> defined in AppComponent...