Question

Angular routes not working on static app

Posted November 3, 2020 303 views
AngularDigitalOcean App Platform

Hi there!

I liked a lot how things work here in DO.
But I just deployed an Angular static site and it’s routes don’t work.
For example, if I go to “https://myapp.com” it loads ok, but if I put “https://myapp.com/someroute” I get this error: “404: The requested page was not found”.

Is there any way to solve this?
I’m really thinking about set up my clients web apps here, but I need this working =].

Thanks in advance!

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.

×
1 answer

Hi @leal32b,

Could this be similar to this Next.js behavior? https://www.digitalocean.com/community/questions/next-js-static-site-requires-html-extension-in-url-for-dynamic-routes

Can you please post some more details about how the static files are generated and where they are located? (i.e. the directory name) When you generate your Angular static site, are the pages exported like so?

  • index.html - / page
  • someroute.html - /someroute page
  • Hi @kamaln7!

    I don’t think it’s quite the same…
    My example is an Angular SPA, so I have only one index.html in “/”.
    After the app is loaded Angular take care of it’s routes.
    I need that the server always responds my calls on “https://myapp.com”, somehow ignoring what’s after that.

    For now I found a workaround: I put a “#” before Angular routes, like this: “myapp.com/#/someroute”.
    To work this way I needed to adjust the app-routing.module.ts setting the parameter “useHash” to true on RouterModule.forRoot:

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

    As explained here: LocationStrategy and browser URL styles, “Older browsers send page requests to the server when the location URL changes unless the change occurs after a ”#“ (called the "hash”). Routers can take advantage of this exception by composing in-application route URLs with hashes.“

    It’s working now, but I don’t like the URL with this ”#“. It looks like the old pages used to be…

    Do you think we can solve this in a better way?
    Thanks a lot!

    • I see! We recently added a catchall_document option to static sites. It lets you specify a document that serves as a fallback for any inexistent routes/files. So, in your case, you can set it to index.html and I believe that should get you the behavior you’re looking for.

      name: app
      static_sites:
        - name: angular
          ...
          catchall_document: index.html
      

      UPDATE (Nov 24, 2020) The control panel now supports the Catchall Document option in the component settings under the “Custom Pages” section.

      This is currently exposed on the app spec but not on the web UI (see the app spec documentation).

      You will need to make this change using either the command line tool doctl or the API. I would recommend using doctl.

      1. Install doctl
      2. List your apps and find your app’s UUID: doctl apps list
      3. Save your app’s spec to a file: doctl apps spec get APP-UUID > angular.yaml
      4. Open angular.yaml in a text editor and add the catchall_document property.
      5. Update your app with the new spec: doctl apps update --spec angular.yaml APP-UUID. This will kick off a new deployment

      Let me know if that works!

Submit an Answer