title: Angular app does not load on page refresh
body: <p>I've been working on an Angular 10 (now 11, same issue) app and it seems like suddenly the ability to refresh the page or go back is no longer working. I know things don't just suddenly break, and the only thing that I've changed is adding a new &quot;details&quot; component that is supposed to open from a list of records, meaning I've added routing to another component. When I load the app the first time, everything seems fine, and clicking on the record in the list does navigate to the details component. If I try to refresh the page (ie, for debugging) or click the back button, only the raw JSON data from the server loads. No styling at all or other HTML markup. No errors show in the console either and I'm getting a 200 response back from the server, so I guess some JS is still working.</p>
  <p>My guess is it's something with routing since that's what I've just added but it's nothing fancy.</p>
  <pre><code>const routes: Routes = [
    { path: '', redirectTo: 'customers', pathMatch: 'full' },
    { path: 'customers', component: CustomersListComponent },
    { path: 'customers/:id', component: CustomerDetailComponent }
  ];
  </code></pre>
  <p>Surely it's some silly Angular config issue but I'm at a loss. I did see <a href="https://stackoverflow.com/questions/38906506/angular-app-not-loading-css-and-js-on-refreshing-page">this AngularJS post</a> and I checked that just to be sure but my index.html is fine (as far as I can tell):</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;MyApp&lt;/title&gt;
    &lt;base href=&quot;/&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body class=&quot;mat-typography&quot;&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Anyone want to show me the simple thing I'm missing?</p>
  <p><strong>Edit:</strong> Also if I retype localhost:4200 manually in the address bar it's fine, but I can't retype localhost:4200/customers. Also tried deleting node_modules, npm update, npm install, and rebooting which seem to have fixed other somewhat similar issues</p>