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 end. It still works, but then if I refresh the page or click any links to other pages, it doesn't work anymore. The reason the "/home" is added on is because I have a RouterModule set up that has home as it's initial path. Here is the code I have in my "app.module.ts" that sets up routes:

 NgbModule.forRoot(),
    RouterModule.forRoot([
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'terms-and-conditions',
        component: TermsAndConditionsComponent
      },
      {
        path: 'privacy',
        component: PrivacyPolicyComponent
      },
      {
        path: 'about',
        component: AboutComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
      {
        path: 'team',
        component: TeamComponent
      },
      {
        path:'safety',
        component: SafetyComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]

So why is it that the build doesn't work for the page linking? It just goes to a "404: page not found" and the console has no errors.

Answer 1

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.

Answer 2

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 3

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"