How to fix requested URL was not found? - Angular 15 gcloud routing

Question

I'm deploying my angular 15 website to gcloud and it never seems to work unless I use the HashLocationStrategy.

When I go to the site (webiste.com), it always says

Error: Not Found
The requested URL /home was not found on this server.

But if I HashLocationStrategy it seems to work

This is my app.yaml

runtime: python27
api_version: 1
threadsafe: true
handlers:
  - url: /
    static_files: dist/pocket-mechanic/index.html
    upload: dist/pocket-mechanic/index.html
    secure: always
  - url: /
    static_dir: dist/pocket-mechanic
    secure: always

skip_files:
  - e2e/
  - node_modules/
  - src/
  - coverage
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE

This is how I use the HashroutingModule

app.routing.module.ts

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

app.module.ts

providers: [
   AuthService,
   {provide: LocationStrategy, useClass: HashLocationStrategy}
],

Answer 1

So the issue that needed fixing was in the angular.json file. My output path was incorrect.

It used to be "outputPath": "dist/pocket-mechanic", but i removed the app name, and left it as just "outputPath": "dist", and it works correctly.

I've also updated the app.yaml to this

runtime: python27
api_version: 1
threadsafe: true
handlers:
  - url: /
    secure: always
    static_files: dist/index.html
    upload: dist/.*
  - url: /(.*\.js)
    secure: always
    redirect_http_response_code: 301
    static_files: dist/\1
    upload: dist/.*\.js
  - url: /(.*\.css)
    secure: always
    redirect_http_response_code: 301
    static_files: dist/\1
    mime_type: text/css
    upload: dist/.*\.css
  - url: /(.*\.png)
    secure: always
    redirect_http_response_code: 301
    static_files: dist/\1
    upload: dist/.*\.png
  - url: /(.*\.jpg)
    secure: always
    redirect_http_response_code: 301
    static_files: dist/\1
    upload: dist/.*\.jpg
  - url: /.*
    secure: always
    static_files: dist/index.html
    upload: dist/.*
     
skip_files:
  - e2e/
  - node_modules/
  - src/
  - coverage
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE