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.

Maybe you have solved this since Sep 3rd, but the solution I provided should work, it did, at least for me :) — AT82, Sep 13 '18 at 11:03
@AJT_82 This works! Thank you so much man, I have spent so much time trying to figure this out and couldn't find solutions/explanations anywhere. — Betzel11, Sep 13 '18 at 19:21
@AJT_82 I have one more question. The official website will be hosted on apache. Do I need to undo these changes and do something else in order to get it working on that? — Betzel11, Sep 13 '18 at 20:11

AT82 · Accepted Answer · 2018-09-13T10:52:53.523

105

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.

edited Sep 13 '18 at 10:52

answered Sep 13 '18 at 10:45

AT82

71,416
24
140
167

1

This answer is still relevant 18 months later! Thank you. – markau May 16 '20 at 09:20
1

Still works in 2021 December ! – Pavindu Dec 20 '21 at 19:13
2

Still works in 2022 September ! – Rohit Maurya Sep 24 '22 at 09:08
What is the meaning of glob? – amoonu Oct 15 '22 at 10:33
2

Still works in 2023 March ! – desoga Mar 27 '23 at 01:05
1

Tested in angular 15+ and still works. Thanks! – Raul Bermudez Apr 29 '23 at 06:55

score 13 · Answer 2 · answered Aug 29 '20 at 22:36

13

Enable Angular Routing in Netlify deployment with the Angular CLI

Getting 404 on Refresh Page

Open angular.json
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
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.
Deploy! You’re done!

answered Aug 29 '20 at 22:36

MADHUR GUPTA

1,014
10
14

7

Just for a help. If someone got an error when build the project after adding this line. Use ```src/_redirects``` – shehan96 Sep 17 '21 at 09:54
Working perfectly in January 2023 with @shehan96 tip by adding "src/_redirects" instead of just "_redirects". – gregoryp Jan 27 '23 at 13:39

score 3 · Answer 3 · answered Aug 23 '18 at 17:01

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"

answered Aug 23 '18 at 17:01

jon_eldiablo

188
2
10

1

Unfortunately it didn't work. It has the same error as before. – Betzel11 Sep 03 '18 at 14:29

score 2 · Answer 4 · answered Jun 23 '20 at 22:45

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

In your angular.json check under the projects property for the name of the build directory, in my case bci
So your Publish directory should be dist/bci on netlify

score 2 · Answer 5 · answered Oct 28 '21 at 00:56

Incase anyone's looking for a solution without having to create a _redirects file.

You can solve the issue by using the hash routing strategy. Your URLs will look somewhat like this name.netlify.app/#/hello/login and all you need to do is specify {useHash: true} when importing your RouterModule e.g

...
imports: [
   RouterModule.forRoot(routes, {useHash: true})
]
...

Angular routing not working on Netlify on page refresh

5 Answers5

Linked

Related