Sharing a Navigation Bar Between Root and Lazy Loaded Modules in Angular

Learn how to seamlessly share a navigation bar between your root and lazy loaded modules in Angular, making your app user-friendly and consistent.
---
This video is based on the question https://stackoverflow.com/q/71960469/ asked by the user 'GioPoe' ( https://stackoverflow.com/u/10599548/ ) and on the answer https://stackoverflow.com/a/71960694/ provided by the user 'Denny' ( https://stackoverflow.com/u/8369880/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: how to share a navigation bar and navigate between root and lazy loaded module

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Sharing a Navigation Bar Between Root and Lazy Loaded Modules in Angular

When building an Angular application with both user and admin functionalities, it's common to face a challenge: how to share a navigation bar between the root module and a lazy-loaded admin module. This is particularly tricky when you want to provide different navigation options for admin users while keeping some links the same for regular users. In this guide, we will discuss how to achieve this with step-by-step instructions and code examples.

Overview of the Problem

In your application, users can log in as regular users (user1), but they can also be given admin privileges, allowing them access to additional features. You set up these features within a lazy-loaded module called admin. The challenge arises when you want a single navigation bar (or header) that includes both the general options for user1 as well as extra admin-specific options.

While you managed to separate navigation between modules in some solutions, it's essential to be able to use routerLink to route to child components in the lazy-loaded module from the shared navigation bar.

Solution Overview

Here's a breakdown of the solution:

Create a Shared Module: Make a module that will hold the common navigation bar component.

Declare and Export the Navbar Component: Ensure the navbar component is declared and exported from this shared module.

Import the Shared Module: Use this component in both your root and admin modules by importing the shared module into them.

Step 1: Create a Shared Module

The first step is to create a shared Angular module that can be imported by both your main app module and the admin module. Here’s how you can do that:

Generate the Shared Module:
Run the following Angular CLI command to create a new module:

[[See Video to Reveal this Text or Code Snippet]]

Modify the Shared Module:
In the newly created shared.module.ts, declare the navbar component and export it so that it can be used in other modules:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Use the Shared Navigation Bar

Now that you have a shared module containing the navigation component, the next step is to utilize it in both your root and admin modules.

Modify the App Module: Ensure that you import the SharedModule into your app.module.ts:

[[See Video to Reveal this Text or Code Snippet]]

Include the Navigation Bar in Admin Module: Likewise, import the SharedModule in your admin.module.ts to use the HeaderComponent:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Implement Navigation in the Header Component

With the shared module set up, you can now implement the navigation links in your header.component.html:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By creating a shared module that includes your navigation bar and importing it into both your app and admin modules, you can easily maintain consistent navigation across your Angular application. Make sure to properly configure and test your routes with routerLink to facilitate smooth navigation between components.

If you follow these steps, you should have a seamless navigation experience whether a user is accessing admin-specific routes or regular user routes.

So, get started now and improve your Angular app with a shared navigation solution!

Видео Sharing a Navigation Bar Between Root and Lazy Loaded Modules in Angular канала vlogize