angulargcloudangular-routingangular15app.yaml

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


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}
],

Solution

  • 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