Angular 15 – Hide Routing URL in Browser Address Bar using 3 Methods

In this tutorial, we will discuss 3 effective methods to hide the address URL change while navigating from one page to another while routing. The methods to hide URL addresses will include the use of skipLocationChange of router service, using the location API and deploying the pathLocationStretegy service of Angular core.

One might wonder, why to hide the routing URL? The reasons could be anything and depend on application feature requirements.

In some situations, the URL can have a number of query params, which are not relevant to the user, so it’s better to represent a clean URL structure and at the same time provide a cleaner user interface to enhance the security of the application, hiding the URL can be advantageous in various scenarios.

[lwptoc]

 

Why Hide URLs in Angular Routing?

Hiding the URL in Angular routing is a common practice in web development. This practice is primarily aimed at creating a cleaner user interface, thereby improving the user experience. When users navigate through your application, they are more likely to focus on the content rather than the URL. This can be particularly important for single-page applications where the URL can become quite complex.

 

Installing Angular and Setting up a Project

Installing Angular is quite straightforward. Open your terminal or command prompt and type the following command to install the Angular CLI (Command Line Interface):

npm install -g @angular/cli

Step 1: Create a New Component

In Angular, everything revolves around components. To begin, let’s create a new component. Use the Angular CLI command to generate a new component. In your terminal or command prompt, type:

ng generate component hiddenUrlComponent

 

Step 2: Configuring the Router Module

Once we have our new component, the next step is to configure the RouterModule. We define our routes in the app-routing.module.ts file. Here’s an example of how to configure the routes:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HiddenUrlComponent } from './hiddenUrlComponent/hiddenUrlComponent.component';

const routes: Routes = [
  { path: 'hidden', component: HiddenUrlComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

Step 3: Modifying the HTML Template

The HTML template interacts with the Angular components. Here, we need to add a router outlet and a link to navigate to our new component:

<div>
  <h1>Welcome to the Angular Hide URL Demo!</h1>
  <a routerLink="/hidden">Go to Hidden URL Component</a>
  <router-outlet></router-outlet>
</div>

 

Step 4: Implementing the Hide URL Functionality

The final step is to implement the functionality to hide the URL. We are going to discuss 3 methods to achieve hide navigation URL in the address bar in the Angular app:

 

Method 1 – Using skipLocationChange

This can be done by using the skipLocationChange attribute in the navigate() method in our component:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-hidden-url',
  templateUrl: './hidden-url.component.html',
  styleUrls: ['./hidden-url.component.css']
})
export class HiddenUrlComponent {

  constructor(private router: Router) { }

  navigate() {
    this.router.navigate(['/hidden'], { skipLocationChange: true });
  }
}

In the above code, the skipLocationChange attribute prevents Angular from reflecting the navigation in the URL. Thus, even though the user is navigating to a new component, the URL in the browser’s address bar remains the same.

 

Method 2 – Utilizing the Location Service

In addition to the method we discussed earlier, there’s an alternative technique to hide the routing URL and the Location service provided by Angular. This service provides applications with the ability to interact with the browser’s URL.

To utilize the Location service for hiding the URL, you can replace the current state in the history stack. This prevents the browser from reflecting the navigation in the URL. Here’s how you can do it:

import { Location } from '@angular/common';

...

constructor(private location: Location) {}

hideURL() {
  this.location.replaceState('/home');
}

The replaceState() method is used to replace the current state in the history stack with a new state. This method is useful when you want to hide the routing URL but still allow the users to navigate back to the previous state using the browser’s back button.

 

Method 3 – Using PathLocationStrategy

Angular’s PathLocationStrategy is another method to manipulate the browser’s URL without changing the browser history. This strategy is the default location strategy used by Angular.

Here’s an example of how you can use this strategy:

import { PathLocationStrategy } from '@angular/common';

...

constructor(private locationStrategy: PathLocationStrategy) {}

hideURL() {
  this.locationStrategy.replaceState(null, 'hidden', '/home', '');
}

The replaceState() method of PathLocationStrategy is used. This method takes four parameters:

• state: Any data you want to preserve with the URL. We pass null here since we don’t want to preserve any data.
• title: The title of the new HTML document at the new URL. We pass 'hidden' here as an example.
• url: The new URL. We pass '/home' here, which is where we want the application to navigate.
• queryParams: Any query parameters you want to add to the URL. We pass an empty string here since we don’t want to add any query parameters.

This method replaces the current state with a new state without changing the browser’s history, effectively hiding the URL from the user.

When working with Angular routing and attempting to hide the URL, some common issues might arise. These can range from incorrect route configurations to syntax errors in the HTML template.

 

Benefits and Limitations of Hiding URL in Angular

While hiding the URL in Angular routing comes with its benefits, it also has its limitations. On the one hand, it enhances user experience and app security. On the other, it can lead to navigation issues and confusion for users who rely on the URL for navigation.

 

Conclusion

In the above guide, we discussed 3 methods to effectively hide navigation URL changes in the Angular app. The hiding of the URL in Angular routing is a valuable technique for enhancing user experience and app security in some use cases. Hope these techniques will be helpful.