How To Add Routes Dynamically In Angular

Da Feng
3 min readSep 25, 2022

Get more control of routes, make application more flexible.

Photo by Javier Allegue Barros on Unsplash

Usually in our code, routes are all pre-defined. We define them as an constant routes variable, and register it into our app-routing.module.ts file. If we have lazy loaded modules, they also have their own routes defined and registered. Each module is very clear about how it will do the navigation, and we don’t normally need to worry about changing routes dynamically. The following picture must be very familiar to you.

Sample Angular routes

Well, in some other cases we won’t be able to pre-define all these routes and they will have to be determined through an HTTP call from backend. That is actually a nice design in big and complicated applications. Some people call it white label App, which is customizable with color, theme, routes and so on, in order to be used for different clients or different purpose. So these applications normally will have dynamically defined routes based on different factors such as the user type, organization or permission.

They all don’t have pre-defined routes, and will require dynamically changing routes in the application. So, in this article, let’s figure out together how to do that!

--

--

Da Feng

I am a software developer, write blogs about Typescript, Angular, React, vue, Front-end technologies, also share some of my life stories and good memories here.