DigitalOcean Apps Angular static site returns 404

Question

I'm trying to deploy an Angular app on DigitalOcean's Apps as a static site. I don't use the Dockerfile. As an Apps plan, I choose basic.

For my backend nestjs I set up the HTTP path /app and it responds. For my Angular static site I set up the root path / but when I try to visit it I get 404.

I am expecting that the root path / returns the angular component content. In local env it is what is comes from localhost:4200

My App Spec yaml file

alerts:
- rule: DEPLOYMENT_FAILED
- rule: DOMAIN_FAILED
name: accainternational
region: fra
services:
- build_command: npm run build
  environment_slug: node-js
  github:
  branch: master
  deploy_on_push: true
  repo: meowow/testapp-backend
  http_port: 3000
  instance_count: 1
  instance_size_slug: basic-xxs
  name: testapp-backend
  routes:
  - path: /app
  run_command: npm start
  source_dir: /
static_sites:
- build_command: npm run build
  environment_slug: node-js
  github:
  branch: master
  deploy_on_push: true
  repo: meowow/testapp-frontend
  name: testapp-frontend
  routes:
  - path: /
  source_dir: /

My angular component

<h1>Hello world</h1>

Angular ver 13.2.0

Will appreciate every suggestion. Thanks

Answer 1

I could publish on Digital Ocean for static file. I used only DockerFile

FROM node:16-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm i
COPY . .
RUN npm install -g @angular/cli
RUN npm run build:ssr:digitalocean
EXPOSE 4200
EXPOSE 443
CMD [ "node", "_static/main.js"]

package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
...
    "dev:ssr": "ng run your-project:serve-ssr",
    "serve:ssr": "node dist/your-project/server/main.js",
    "build:ssr": "ng build && ng run your-project:server",
    "prerender": "ng run your-project:prerender",
    "build:ssr:digitalocean": "ng build --base-href / && ng run your-project:server && mv dist/your-project _static && \\cp -r _static/server/main.js _static/main.js"
  },

angular.json

"root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/your-project",<---
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
...
         "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/your-project/server", <---
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "inlineStyleLanguage": "scss"
          },

The problem for angular apps with SSR is the route, all you need is to change the path and in the final command script put this "&& mv dist/your-project _static && \cp -r _static/server/main.js _static/main.js" because you need to move the assets to route by default (Digita Ocean) and don't forget copy or move the main.js to root path. I hope that it helps you or anybody