routing does not works on production for "blog/ :page"

Question

I am learning angular and is trying to build a blogging website for myself. The website works as expected on my local system when I run it using

ng serve

But on the other hand when I created a build of it and uploaded it on production using

ng build --prod

The routing does not works. I added the code in .htaccess on my server

RewriteEngine On
# If an existing asset or directory is requested go to it as it is

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

The routing started working for

http://www.atest.co.in/blog/

but still fails for

http://www.atest.co.in/blog/Manual_Testing%2FIs_Manual_Testing_Dying

the routing set for the above are as follows:

  {
    path: 'blog',
    component: BlogComponent
  },
  {
    path: 'blog/:page',
    component: BlogComponent
  }

Though the later one works fine on localhost

Answer 1

Updated

According to your code, it's just static html file load. But the route in your question has a / in the file name which is encoded as %2F. I Think it makes an error when route directly. If you access http://www.atest.co.in/blog/ first and then click link in the sidebar, you would get the page.

Remove the %2F character in file name, it would work.