Angular routing not working on Netlify on page refresh

Question

I deploy to netlify using ng build --prod, and the website works. But when I go to it, it automatically changes the link by adding /home onto the e

Answer 1

try Build command: ng build --prod --base-href ./ and add file to root project netlify.toml:

# A basic redirects rule
[[redirects]]
  from = "/*"
  to = "/index.html"

Answer 2

I had named my build directory wrongly from the original directory name i used to create the project

1. In your angular.json check under the projects property for the name of the build directory, in my case bci

2. So your Publish directory should be dist/bci on netlify

Answer 3

Enable Angular Routing in Netlify deployment with the Angular CLI

Getting 404 on Refresh Page

1. Open angular.json

2. Under assets, add _redirects. This lets the resultant dist folder from a build include your soon-to-be _redirects file.<project-name>.architect.build.options.assets

3. In the src folder, add _redirects with the following line. Netlify uses this to redirect to index no matter what, allowing angular routing to take over.

4. Deploy! You’re done!

Answer 4

Old question, but for those who might stumble on it on how to enable angular routing in Netlify. Create a file _redirects in your src folder, add the following to it:

/*  /index.html 200

in your angular.json file add the following to projects.architect.build.options.assets

{
  "glob": "_redirects",
  "input": "src",
  "output": "/"
}

If you happen to use older version of Angular with angular.cli.json file, follow this: https://medium.com/@mgd4375/how-to-enable-angular-routing-in-a-netlify-deployment-with-the-angular-cli-e2eda69f1b5b where you do the equivalent change in angular.cli.json file, i.e add "_redirects" to the corresponding assets array.