title: Page not found when reloading Angular page on Firebase
body: <p>I've deployed my angular app to firebase. I can see the sign in page fine but I get the following error when I reload the page:</p>
  
  <pre><code>This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.
  
  Why am I seeing this?
  
  You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
  You can also add a 404.html in the root of your site to replace this page with a custom error page.
  </code></pre>
  
  <p>So as the error suggests I checked my <code>firebase.json</code> file and it displays this:</p>
  
  <pre><code>{
    "firebase": "******",
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
  </code></pre>
  
  <p>Here you can see that my <code>public</code> folder is my <code>dist</code> folder. This <code>dist</code> folder is actually where I place all of my files (css,js,html and the index.html) when gulp builds it all. The folder structure looks like this:</p>
  
  <pre><code>dist
    css
    images
    js
    templates
    index.html
  </code></pre>
  
  <p>So the destination folder above does have an <code>index.html</code> page - so why am I getting this error? Angular should be stepping in here and handling all routing but that doesn't seem to be the case. </p>
  
  <p><strong>EDIT</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HIjAb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HIjAb.png" alt="enter image description here"></a></p>