CODEWITHSUNDEEP
angularjsnginxroutesconfightml5mode
RoundOutTooSoon
RoundOutTooSoon

Reputation: 9891

Nginx rewrite rules for Angularjs to remove # hash in url in dynamic routes

I have done the following:

AngularJS app

In app.js:

$locationProvider.html5Mode(true);

In index.html:

<base href="/">

nginx config

location / { try_files $uri /index.html; }

After deployment, things are working fine (# hash sign is removed) with the static pages. I can go directly to http://fakeurl/about or http://fakeurl/download pages; if I refresh the browser, the pages still load.

However, when I go directly to a dynamic page:

http://fakeurl/cars/:car_id

Then nginx will serve 404.

If I use the # path, then it redirects to the path without the # sign and displays the page; but when I refresh the page again, it shows 404. (This only happens with dynamic routes)

http://fakeurl/#/cars/:car_id

http://fakeurl/#/shops/:shop_id

What rewrite rules do I need to write in the nginx blocks to serve my dynamic routes? Thanks!

Upvotes: 2

Views: 5414

Answers (2)

baqx0r
baqx0r

Reputation: 125

I think you can use this regex pattern ^(.*)\/#and rewrite it with $1.

Upvotes: 0

RoundOutTooSoon
RoundOutTooSoon

Reputation: 9891

I burnt all my midnight oil last night and I found a solution here. If you have a better one, please post here so I can learn

https://gist.github.com/mreigen/4dc8effec8186315c3aac4ce6da46c9a

Upvotes: 0

Related Questions