Utilize Angular’s Auxiliary Routes To Reduce Application Bundle Size

A brief guide to sharing smaller files

Photo by Nick Seagrave on Unsplash

Everyone first advises reducing bundle size when it comes to enhancing the performance of your online application. How to reduce the bundle size for your Angular application is covered in many online articles. Our favorite is lazy loading.

But in this article, we’ll discuss how auxiliary routes can also be helpful.
If you’re interested in learning more about auxiliary routes, I will write a detailed article shortly. I’m just too lazy to write tens of thousands of words :).

Let’s go on to the exciting phase now by taking action to comprehend this idea:

Create a new Angular app

Run the following command in your preferred terminal to start a brand-new Angular application:

ng new aux-route-demo

Create New Components

For the sake of this demonstration, we will make the product-card and the shopping-card components. Let’s once again use our go-to Angular CLI to handle the hard work for us.

ng g c product-card
ng g c shopping-card

Add Code to the Components