Example of how to implement routing in an Angular application

Once your Angular components are created, the next step is to define routes so users can navigate and access the information contained in the different views. The project https://github.com/al118345/Ejemplo_routing_angular contains an Angular web example with all the implementations analyzed in this article, plus the following explanatory video:

1. Add Angular routing to the project

When you create your project, Angular asks

? Would you like to add Angular routing? (y/N)

Answer y. Angular automatically creates a file called app-routing.module.ts with content similar to this:

It also adds a reference to that file in app-module.ts. If you do not have it, you can create it manually and add it to your project.

2. Explanation of how it works

Basically, it is a small route file where the keys represent the different features.

The first important field is path, which contains the URL fragment required to invoke the component. The next field is component, which identifies the Angular object associated with that route.

Below we show the following example extracted from the project https://github.com/al118345/Ejemplo_routing_angular

The order of the lines is important. Angular evaluates the file from top to bottom and stops at the first route that matches the path.

{path: 'home', component: HomeComponent} I consider HomeComponent to be the initial view of the program and therefore the first one shown to the user. When the route is /home, Angular opens HomeComponent.

{path: '', component: HomeComponent} If you only type the domain, Angular shows HomeComponent, the initial screen of the project. We recommend placing this line in the second-to-last position.

{path: '**', component: HomeComponent} If you type any address that is not covered by the previous lines, Angular shows HomeComponent. Important: this line must be the last one in the file. It is the final fallback.

{path: 'vista1', component: VistaSecundariaComponent} If you type vista1 in the domain path, Angular automatically shows VistaSecundariaComponent.

{path: 'vista1/:id', component: VistaSecundariaComponent} If you type vista1/:id, Angular shows VistaSecundariaComponent but with an important difference.
As you may have noticed, this route is composed of a fixed part and a variable part defined as id. That id can be any value and is passed to the component as a route parameter.
Below you can see how to obtain that value from the route object:
With ActivatedRoute, obtaining the id parameter is straightforward. If you want to see this component in action, visit the project https://github.com/al118345/Ejemplo_routing_angular.

{path: 'vista2', component: VistaTerceariaComponent, canActivate: [UsersGuard]} This is the most complex case because it uses canActivate: [UsersGuard]. This feature applies a security layer to the route, so every time someone navigates to vista2, Angular checks whether a condition is met. That logic is implemented by the UsersGuard function explained in the next section of the article.

3. Implement UsersGuard

Some projects require specific permissions to access certain views. To implement this security system we can use a guard with the following command:

ng g guard guard/user

The guard/user part is simply the name and location of the object you are going to create, so you can modify it. After running the command Angular will show four options. Select the first one: CanActivate.

After that command we have created the file users.guard.ts and modified it until it looks like this:

In this case we simply check whether currentUser with value test has been stored. If the condition is true, navigation is allowed; otherwise the guard returns false and redirects to another view.

Post data: to store this information you can use localStorage like this localStorage.setItem('currentUser', 'test');

4. How this changes in modern Angular

In current Angular projects, especially standalone applications, the routing file is usually app.routes.ts instead of app-routing.module.ts. The idea is the same: each route connects a URL path with the component that must be rendered.

The practical advantage is that routes can lazy load standalone components with loadComponent. This keeps the initial JavaScript bundle smaller and only downloads the component when the visitor opens that page.

5. Lazy loading a standalone component

The following example loads the article component only when the user visits blog/angular-routing. This pattern is ideal for blogs, documentation pages and administration areas with many independent screens.

6. Functional guards

Modern Angular also supports functional guards. They are shorter than class-based guards and work well with inject(), which makes redirects and authentication checks easier to keep close to the route definition.

Practical routing checklist

Place specific routes before generic routes.
Keep the wildcard route at the end.
Use redirects for old URLs instead of deleting them.
Prefer loadComponent for pages that are not needed in the first screen.
Add canonical and alternate URLs when the route has SEO value.