Ionic 4 app hosted on Firebase returns 404 ONLY on reload

Question

I created an Ionic 4 PWA using @angular/pwa, firebase hosting and this very helpful tutorial.

After following all the directions in the tutorial (and building my app out into a 'www' folder), I deployed my working Ionic 4 app to this working link, using 'firebase deploy' in the CLI.

The problem is: on the first visit to the page, everything works perfectly and with no flaw. But when I reload a page, or visit a page using the search bar (for example, typing in "https://..link../login") Firebase returns me a 404 error.

This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

In the console:

Failed to load resource: the server responded with a status of 404 ()

My firebase.json:

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

My Angular routing module: (app-routing-module.ts)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'landing', loadChildren: './landing/landing.module#LandingPageModule' },
  { path: 'add-event', loadChildren: './add-event/add-event.module#AddEventPageModule' },
  { path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'add-profile', loadChildren: './add-profile/add-profile.module#AddProfilePageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

What could I do to fix this error?

Answer 1

Angular/Ionic apps direct all traffic to the index.html file and route the request from there to the correct module/component. When you try to access https://applifybyamplify.firebaseapp.com/login firebase is looking for a folder ./login/index.html so you get a 404.

You need to use rewrite rules in your firebase.json.

Something like this should work

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [   
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}