Optimized Angular Component and Routing Setup

Part one of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

Frame courtesy — মেঘে ঢাকা তারা / The Cloud-Capped Star (1960)

Prerequisites

Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —

Introduction to optimized Angular codebase setup

Angular Component and Routing Setup

Now that we are ready to start with the setup, we will be closely following the order in which the components are to be assembled for setting up the page structure mentioned in the introduction.

Creating an Angular workspace with SCSS

We will use the command ng new <app-name-of-our-choice> --style=scss to initialize the workspace. On the terminal prompt, we will select “Yes” to enable routing.

Angular workspace creation with SCSS

Setting up Source Code Management repository

This is the correct time to move this workspace to any remote version control system. I usually use GitHub as the remote and GitHub Desktop and command line Git for local Git functions. Additionally, for simple code check-ins , VS Code also does a pretty good job.

Note: Git steps are beyond the scope of this guide. Directions given at GitHub.com for pushing an existing repository is self-explanatory.

Creating the global components

We will first create the components that are common to the application and do not need to be a part of any specific feature module. For our sample application, these components would be:

1. Common header
2. Common footer
3. Secured section container
4. Dashboard
5. Login

We will use the following command structure to generate all these components inside a global-components directory —
ng g c global-components/header
After all the components are generated the codebase will look something like this —

Creating the global components

Creating the feature modules and their components

We will now create the Angular modules for breaking the application code into a number of pages/components and grouping them into modules based on their similar utility/features. Although the decision of grouping the pages into a particular module is subjective and depends on the intended user experience (UX), it needs to taken into account that these modules would be lazily loaded in the browser eventually and hence, grouping correlated pages/components is advisable.

We will use the following command structure to generate all these feature modules inside a modules directory along with their routing modules —
ng g m modules/feature-module-a --routing

Creating feature modules with routing

Now, we will create a container component for each module that will have the common sections in that given module. E.g. The side navigation for our sample application.

In order to generate the component inside the specific module, we will have to specify the module in the given command structure —
ng g c modules/feature-module-a/feature-module-a-container --module=modules/feature-module-a/feature-module-a.module.ts --flat

The codebase after following the above step for the two modules will look something like this —

Creating the common module containers

Next, we will create the components for the pages inside their corresponding modules. We will use the following command structure to specify the module inside which the component is to the created —

ng g c modules/feature-module-a/page-a1 --module=modules/feature-module-a/feature-module-a.module.ts

Creating components inside their feature modules

Setting up the routing

Now that we have all the components generated, it is time to connect all of them up and set up the routes. After this step, the page outlines will be visible for each route. It is advisable to complete and test all the routing configuration in this step.

Firstly, we will start with the top-most level of routing.

For the top-level routing to work, router-outlet needs to be placed in the app component and the secure container component (which will also have the header and footer). This is how both the files will look after the update —

We will then add the following routing rules in the top-level routing module i.e. app routing module —

1. Separating the routes between login (non-secure) and secure section. Later on, we will be able to put in guards for stopping unauthorized access.
2. Lazy loading the feature modules.
3. Default redirection to login route.
4. Default redirection to dashboard route in the secure section.
5. For any invalid routes in secure section, redirecting to dashboard route.
6. For any invalid routes not in secure section, redirecting to login route.

Next, we will continue with the feature module-level routing.

For this module-level routing to work, router-outlet needs to be placed in each of the feature module container components.

E.g. This is how a sample feature module container will look after the update —

We will then add the following routing rules in each of the feature module routers —

1. Default redirection to the first route.
2. Loading the page components for each page route.

E.g. This is how a sample feature module router will look after the update —

It is now time for testing the routing configuration as well as the page structure for each route. Hitting the complete URL will give the expected page structure.

Login page should not have any header/ footer

Dashboard like any other secure page will have the header/ footer but will not have any module container as it is not part of any feature module.

Any other secure page that is part of any feature module will have the module container along with the header/ footer.

Next Steps

With the routing setup ready, we can now proceed with the following tasks chronologically —

Part 2 — Styling Framework Setup
Part 3 — Including Angular Material
Part 4 — Service/ API Integration

P.S. You can refer to my Git repo for all the code and the latest updates on the sample application.

Working Example

You can visit https://angular.owrrpon.dev/ for the working sample Angular application that follows the optimized codebase setup outlined in the above guide.