CODEWITHSUNDEEP
angularjs.htaccesshttp-redirect
Jack Power
Jack Power

Reputation: 303

Use a redirect to include a # at end of URL

I have a site built with angularJS. I have not currently enabled hashbang urls or html5 mode. As such, the structure of the URLs are: https://www.example.com/#/example

I recently saw my site pop up on google (which I was very happy about). However, the url it directed me to excluded the required /#/ e.g. https://www.example.com/example. Hence, I got a 404 error (which I was not very happy about).

So my initial reaction was to write a 301 redirect in my .htaccess file that attaches #/ to any url that does not have it in.

However, I am unsure how to actually do it. If anyone knows how to write this, or has a more elegant solution your input would be much appreciated!

Upvotes: 1

Views: 207

Answers (1)

MrWhite
MrWhite

Reputation: 45829

In the root .htaccess file:

RewriteEngine On
RewriteRule ^(example)$ /#/$1 [R=302,L,NE]

This literally redirects just /example. The NE flag is necessary in order to prevent the # (a special char) being percent encoded. The $1 backreference matches the parenthesised subpattern in the RewriteRule pattern - in this case it's just "example" - saves you typing it twice! But when you introduce a more complex pattern (see below), this is mandatory.

Note that I've used a 302 temporary redirect above. Change this is to a 301 redirect when you are sure it's working OK. Temporary redirects are not cached by the browser, so it makes testing easier.

If you need something a bit more generic, then you'll need a pattern - but only make it as generic as you need. For example, to only match the letters a-z (lowercase) then:

RewriteRule ^([a-z]+)$ /#/$1 [R=302,L,NE]

Upvotes: 1

Related Questions