404 error after deploying angular app with multiple routes

Posted August 1, 2021 986 views
AngularDigitalOcean App Platform

I’m testing the new feature called “apps platform” I’m using an angular project with multiple routes and parameters. I’ve been trying multiple ways to configure my app but always getting a 404 message… any ideas? it would be a best idea to create an empty droplet to manage to route manually?

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
1 answer

Hi @IsaacFH,

There is a similar question from a user which was also using App Platform with Angular again experiencing a 404 error:

  • download current app spec from, in the settings tab you will find App Spec to app.yaml file

  • add catchall_document: index.html

    name: myapp
    region: fra
    - build_command: |-
      npm install
      npm install -g @angular/cli@11.2.0
      ng build --prod
    environment_slug: node-js
      branch: master
      deploy_on_push: true
      repo: myrepo/myapp
    name: myapp
    output_dir: dist
    catchall_document: index.html
      - path: /
  • find app id by running: doctl apps list

  • update spec by runing: doctl apps update {{ap_id}} --spec app.yaml

Having said that, I’ll urge you to check out the question and the thread beneath it, it might help you further.

  • Thanks for your answer but it doesn’t work, still getting the same error (404).

    • Hi @IsaacFH, it looks like your site is built to a directory inside the dist directory. App Platform is uploading the dist directory as a whole so all the files are under the subdirectory.

      In your component settings, set the Output Directory to dist/name replacing name with the actual name of the directory