Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Remove hash from url in Angular

Remove hash from URL in angular 12 and deploy to server

Aman Jain, February 1, 2022

From the first install angular come with hash URL routing and it’s defined in app-routing.module.ts. To remove hash from URL we need to change useHash key to false. Angular runs it development application ng server and whenever we wanted to deploy the application we need a server like Apache or Nginx.

If we remove hash then we can not load other url’s of the application because it cannot route easily to handle this scenarios we use .htaccess or nginx.conf so that we can route all traffic to our index.html file.

So, remove the hash location strategy from app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
 {
     path: "/",
     component: LoginComponent
 }
];

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

So here we changed RouterModule.forRoot(routes,{useHash:true}) to RouterModule.forRoot(routes,{useHash:false}).

Or we can remove the second parameter as below

RouterModule.forRoot(routes); 

Deploy angular application without hash URL on server

By removing the hash from URL we won’t be able to access the other URLs of application except / or index page.

So to access them we need add htaccess rule on our Apache server as below

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule ^(.*) index.html [NC,L]
</IfModule>

Now our old url was

http://localhost:8080/#/login

and we will be able to access out url without Hash as below.

http://localhost:8080/login

Related

Javascript Angular angularhashurl

Post navigation

Previous post
Next post

Related Posts

Javascript How to set and get cookies in angular using package

How to set and get cookies in angular using package ?

April 15, 2022April 15, 2022

In our last article we have covered how to use set and get cookies using a service in angular and in this article i will show you to set and get cookie using package. Cookies are used to store the data in client computer, Cookie can hold tiny information in…

Read More
Angular How to use moment js in angular

How to use moment js in angular ?

October 13, 2022March 16, 2024

This post covers how to use Moment.js in Angular. We’ll go over why Moment.js is useful, how to install it, and how to use it in Angular to manipulate dates and times. Moment.js is a powerful and flexible library for manipulating dates and times in JavaScript. It has been around…

Read More
Javascript custom validation in angular reactive form

How to make custom validation in angular reactive form ?

September 7, 2021October 1, 2021

Angular already have many built-in validators but sometimes we need some extra validation according to our project need. Steps to create custom validators Step 1: Create a function or class method where we can define our all custom validators. File: src/CustomValidators.ts 2. Define the function definition of custom validators to…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • The Resilience of Nature: How Forests Recover After Fires
  • Understanding Laravel Cookie Consent for GDPR Compliance
  • Understanding High Vulnerabilities: A Critical Overview of the Week of May 12, 2025
  • Installing a LAMP Stack on Ubuntu: A Comprehensive Guide
  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version