404 page when refreshing Angular SPA on Digital Ocean App Platform

user_195363 0
Viewed 2294

I have been testing out an Angular single page app on the new Digital Ocean App Platform as a Static Site.

The Angular app loads fine when I access the root URL and navigate to different pages by clicking links. However, when I refresh the browser on any of the pages, I get a 404 error.

Does the Digital Ocean App Platform need an nginx.conf file? Am I missing a step where I need to enable pushstate in the environment?

enter image description here

enter image description here

single-page-application digital-ocean static-site angular
3 Answers

EDIT:

You can now officially use catchall_document property instead of error_document in this instructions.

I think official SPAs in app platform are not possible right now. More informations here https://www.digitalocean.com/community/questions/digital-ocean-apps-spa-application

But there is a workaround for now.

Create app.yaml file

name: APP_NAME
region: fra
static_sites:
- build_command: |-
    git init
    git clean  -d  -f .
    git remote add origin https://github.com/REPOSITORY
    git fetch origin $BRANCH_NAME
    git checkout $COMMIT_SHA
    npm install
    npm install -g @angular/cli
    ng build --prod
  environment_slug: node-js
  github:
    branch: master
    deploy_on_push: true
    repo: REPOSITORY
  name: APP_NAME
  error_document: index.html
  routes:
  - path: /

In this file we set error_document to index.html (our index file). Every page is now redirected to index file.

Then you have to run doctl command to create new app using app.yaml file. You have to use this command in order to apply this configuration file.

doctl apps create --spec app.yaml

After that go to your app platform dashboard and you can see your SPA application

How to setup doctl? https://www.digitalocean.com/docs/apis-clis/doctl/how-to/install/

How to view my current .yaml settings? In app dashboard click on settings tab and in App spec row click on view

That's it

user_26756050
user_952420

Another workaround is to use "#" before angular routes, like this: "myapp.com/#/someroute" (https://angular.io/guide/router).

In app-routing.module.ts set the parameter "useHash" to true on RouterModule.forRoot:

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

I'm having the same issue here and it worked just fine. I'll use this way until DigitalOcean solve this behaviour.

user_34939310
Related