Angular 2 in production URLs are breaking when reloading the page

Question

I am running my app in production using Nginx server when I am loading the app and redirect to another route its working fine but when I am reloading the page I am getting 404 Not Found error. consider if I am loading app at www.example.com then the route is working fine after reloading the page also.

if I am redirecting to the another route www.example.com/about first the page is loading but if I reload the page at the same state I am getting the error as 404 Not Found.

I found the solution for the same

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

import {MyApp} from './myapp';

bootstrap(MyApp, [
 ROUTER_PROVIDERS,
 {provide: LocationStrategy, useClass: HashLocationStrategy}
]);

The above solution is working fine but the problem is I am getting the URL with #

www.example.com/#
www.example.com/#/about

but my requirement is I don't want # in URL

even I did changes in Nginx .config file as given bellow

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

but still URLs are getting the same error

Please any help appreciated thank you

Answer 1

Try this...

index index.html;

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

# Location of asset folder
location ~ ^/(assets)/  {
  gzip_static on;
  gzip_types image/svg+xml text/plain text/xml text/css
    text/comma-separated-values
    text/javascript application/x-javascript
    application/atom+xml;

  expires 0;
}