Remove hash(#) at URL Angular and Still be able to refresh and Not Getting 404 Not Found !

#angular #webdev #javascript

recently i’m building a movie stream app and decide to use angular.

if you have 404 not found error when refreshing or you have ugly hash url on your web and projects
this article is really for you this article suited you if you use Angular 4 | 5 | 6 |7 |8 | 9 and older version

Problem :

After i’m finished coding and deploying my angular app at shared hosting Server and found out if i am refreshing one of my movie detail component it Got error 404 Not Found,
And than i really trying to solve this for a while by adding this :

To my project app-routing.module.ts

scrollPositionRestoration: ‘top’, useHash: true,

and this to my project app.module.ts

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

And the results is my movie detail component can be refreshed and not getting 404 Not Found anymore but the url looks ugly ( for me ) it shows
www.example.com/#/movie-detail

Solutions:

This is problem had me struggle about 2 days can’t be solved by me , i try to googling and search on youtube old video tutorial on angular JS but that’s not working.
And in the moment i got this article really helpfull content contains about angular lastest version routing , more deep explanation and trying to implement it on my projects

(https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566#new-generator)

The solution is simple you just need to make .htaccess (make sure it’s not txt format) on your Public_html that contains this :
.htaccess

	# For instructions and new versions of this Gist go to:# https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566#
	Version 1.4.0
	<IfModule mod_rewrite.c>
	RewriteEngine On # — REDIRECTION to https (optional):
	# If you need this, uncomment the next two commands # RewriteCond %{HTTPS} !on # RewriteRule (.*)
	https://%{HTTP_HOST}%{REQUEST_URI} # — RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f
	[OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^.$ — [NC,L] RewriteRule ^(.) index.html [NC,L]
	</IfModule> # — — — — — — BROWSER CACHING (optional)# Disable browser caching in production.
	You can add/remove file extension as you wish.#<FilesMatch “\.(html\|htm\|js\|json\|css)$”>#
	<IfModule mod_headers.c># FileETag None# Header unset ETag# Header unset Pragma# Header unset Cache-Control#
	Header unset Last-Modified# Header set Pragma “no-cache”# Header set Cache-Control “max-age=0, no-cache, no-store,
	must-revalidate”# Header set Expires “Mon, 10 Apr 1972 00:00:00 GMT”#
	</IfModule>#</FilesMatch># — — — — — —

view raw .htaccess hosted with ❤ by GitHub

and changes this on your angular projects


	app-routing.module.ts :
	scrollPositionRestoration: ‘top’, useHash: false,
	app.module.ts
	providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],

view raw pathlocation.ts hosted with ❤ by GitHub

And boom your Angular project gets regular url like www.example.com/movie-detail without hash and able to Refresh and not getting 404 Not Found anymore

I know this is not a problem for senior developer but it’s kinda BIG AND ANNOYING PROBLEM for junior developer or engineer that first time using angular and i just want to them to have the lastest article , because sometimes developer more interest and believe lastest article.

i hope this article can be grow angular developer numbers around the world

if you can’t solve Angular Project problem just Send me messages
i’d love to help and answer it :) ✌️

just follow my github here maybe i’ll update more free projects 🎮 soon
(https://github.com/Anderies)