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.

Sandysandye

Maybe you have solved this since Sep 3rd, but the solution I provided should work, it did, at least for me :) – Paleo

@AJT_82 I will look into it now. – Sandysandye

@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. – Sandysandye

@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? – Sandysandye

related?: docs.netlify.com/frameworks/angular/#redirects – Clarita

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.

Paleo

This answer is still relevant 18 months later! Thank you. – Blues

Still works in 2021 December ! – Roshan

Still works in 2022 September ! – Dubonnet

What is the meaning of glob? – Cavalier

Still works in 2023 March ! – Percolation

Tested in angular 15+ and still works. Thanks! – Penal

Thank you this is working in 2024 using angular 17. I will add that it angular.json now looks like this "assets": [ "src/favicon.ico", "src/assets", "src/_redirects" ], – Planter

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!

Coker

Just for a help. If someone got an error when build the project after adding this line. Use src/_redirects – Pugnacious

Working perfectly in January 2023 with @Pugnacious tip by adding "src/_redirects" instead of just "_redirects". – Concatenation

In my case, using Angular version (Angular CLI: 16.1.8), i have put a "src/" before "_redirects", resulting in: "src/_redirects". "assets": [ "src/favicon.ico", "src/assets", "src/_redirects" ], – Arrogant

Thanks so much. I have used NX with Angular and it works like a charm. You saved my time. – Messidor

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"

Gerlachovka

Unfortunately it didn't work. It has the same error as before. – Sandysandye

Answer 4

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

Hime

Answer 5

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})
]
...

Storey

Answer 6

I encountered the same problem and fixed it using solution of @AT82

plus

project.<app-name>.architect.build.outputPath: "dist/"

because mine was set by default as dist/<app-name>

or

Change the netlify "Publish directory" under "Build & deploy > Continuous deployment > Build settings" to match outputPath in angular.json

Pseudaxis

Answer 7

Although most answers do the trick for the redirection, I suggest following the official Netflify documentation

Cheerio

Answer 8

Angular with NX

1. create new file _redirects

2. Add below line in _redirect file

   /* /index.html 200

3.open project.json ex: apps\my-app\project.json

4.add path at targets.build.options.assets :

"assets" :[
 "apps/my-app/src/_redirects"
]

Dustydusza

Answer 9

Angular Monorepo v18

Here is how i managed netlify not found error within an angular monorepo:

1. Update angular.json: project-name > architect > build > options > assets:

   "assets": [
     {
       "glob": "**/*",
       "input": "projects/project-name/public"
     },
     {
       "glob": "_redirects",
       "input": "projects/project-name/public",
       "output": "/"
     }
   ]

2. Add _redirects file in the following path: projects/project-name/public

3. _redirects content: /* /index.html 200

Candlemaker