Optimized Angular Component and Routing Setup
Part one of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.
Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —
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.
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:
- Common header
- Common footer
- Secured section container
We will use the following command structure to generate all these components inside a
global-components directory —
ng g c global-components/headerAfter all the components are generated the codebase will look something like this —
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
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 —
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
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 —
- Separating the routes between login (non-secure) and secure section. Later on, we will be able to put in guards for stopping unauthorized access.
- Lazy loading the feature modules.
- Default redirection to login route.
- Default redirection to dashboard route in the secure section.
- For any invalid routes in secure section, redirecting to dashboard route.
- 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 —
- Default redirection to the first route.
- 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.
With the routing setup ready, we can now proceed with the following tasks chronologically —
P.S. You can refer to my Git repo for all the code and the latest updates on the sample application.
You can visit https://angular.owrrpon.dev/ for the working sample Angular application that follows the optimized codebase setup outlined in the above guide.