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 Insert style tag dynamically in html in angular

How to Insert Style Tag Dynamically in Angular ?

August 4, 2022March 16, 2024

Sometimes we want to insert style tag in angular app, For an instance we have third party APIs or widget and we wanted to add it in our page then in this condition provided script and style are not angular friendly or we can say it can be pure JavaScript…

Read More
Javascript Password and confirm password validation in angular

Password and confirm password validation in angular ?

September 11, 2021November 9, 2023

Angular provides built-in library for validation but it doesn’t have built in validation for Password and confirm password validation in angular. so in this tutorial i am going to explain how can we make custom validation for this same as angular built-in validations. Confirm password most useful utility when we…

Read More

Show dropdown list from ajax response in jQuery

September 10, 2021September 10, 2021

Showing Dynamic Select Box using jQuery and Php,MySql In this tutorial, we are going to learn the dropdown list using AJAX. Loading dropdown values from AJAX requires knowledge of javascript, jQuery, php and html. Sometimes it requires to load the dropdown like countries, state, city list dependently. In this case…

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

  • July 2025
  • 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

  • Mapping Together: The Vibrant Spirit of OpenStreetMap Japan
  • Understanding High Vulnerabilities: A Deep Dive into the Weekly Summary
  • Building a Million-Dollar Brand: The Journey of Justin Jackson
  • Mastering Schedule Management with Laravel Zap
  • The Resilience of Nature: How Forests Recover After Fires
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version