Angular Routing with Google AppEngine and Flask

Question

I have an application on Google AppEngine, using Python3 and Flask on the back end and Angular on the front. If the front end navigates to, say, /welcome using Angular routing, it works fine. But then if I hit the browser refresh, it gives a 404 Error, because, of course, xxxx.appspot.com/welcome does not exist on the back end. Is there a way around this? Here is my app.yaml:

runtime: python38

handlers:
  - url: /rest/.*
    script: auto
  - url: /(.+)
    static_files: dist/\1
    upload: dist/(.*)
  - url: /
    static_files: dist/index.html
    upload: dist/index.html

What about - you could redirect the user to the home page (instead of the 404) and they would then have to manually navigate again back to ```/welcome```. You could add a path parameter while redirecting them to the home page that your angular App will interpret and automatically navigate them to the right page — NoCommandLine, Nov 24 '21 at 18:04
An in this [answer](https://stackoverflow.com/a/17635653/13171940), you use a catchall `/.*` handler at the end of your `app.yaml` — Rogelio Monter, Nov 25 '21 at 00:02

score 0 · Answer 1 · edited Dec 07 '21 at 15:33

I was not able to get the suggestions provided in the comments to work. There is supposedly a server-side fix for this, but it seems like everything I was supposed to do was already done. So I implemented a client-side solution that fits my purposes. First I specified using hashing in url generation, with the following section in app-routing.module.ts:

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

This gets rid of the 404 error, but doesn't do exactly the expected thing. So I trapped for a refresh request in app.component.ts with the following code in the constructor:

router.events.subscribe((event) => {
  if (event instanceof NavigationStart) {
      if (!router.navigated) this.goHome();  // That is, user hit the refresh button
  }
});

calling my own goHome() method, which handles appropriate navigation.

Credit for the second piece of code: https://medium.com/front-end-tricks/detect-browser-refresh-with-angular-590cd21d2f02 — Charles Libicki, Nov 28 '21 at 13:04

Angular Routing with Google AppEngine and Flask

1 Answers1