Angular routing not working on Netlify on page refresh

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.


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

    enter image description here

  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. enter image description here

  4. Deploy! You’re done!