title: Angular SSR app fail to render homepage from url while server is running
body: <p>I have an Angular SSR app that is not able to render the homepage via localhost:4000 while the backend node server is running.</p>
  <p>So if I go to localhost:4000 it will start loading but never display anything nor finished loading. However, if I go to another page like 404 where I have a button to take me to the home page it does load it. Additionally, if I turn off the backend server it does load the homepage.</p>
  <p>The app routes are handled like this:</p>
  <pre><code>//app-routing.module.ts
  
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { GuardDashboardGuard } from './guard-dashboard.guard';
  import { KYCGuard } from './guard-kyc.guard';
  
  // More imports for other paths
  
  const routes: Routes = [
  
      {
          path: 'profile-update',
          canActivate: [GuardDashboardGuard, KYCGuard],
          loadChildren: () =&gt;
              import('./pages/profile-update/profile-update.module').then((m) =&gt; m.ProfileUpdatePageModule),
      },
  
      // More paths with the same structure
  
      {
          path: '',
          loadChildren: () =&gt; import('./pages/home/home.module').then((m) =&gt; m.HomePageModule),
      },
      {
          path: 'faqs',
          loadChildren: () =&gt; import('./pages/faq/faq.module').then((m) =&gt; m.FaqPageModule),
      },
      {
          path: '',
          redirectTo: '/',
          pathMatch: 'full',
      },
      { path: '**', redirectTo: '404' },
  ];
  
  @NgModule({
      imports: [
          RouterModule.forRoot(routes, {
              scrollPositionRestoration: 'enabled',
              scrollOffset: [0, 0],
              anchorScrolling: 'enabled',
              relativeLinkResolution: 'legacy',
              initialNavigation: 'enabledBlocking',
          }),
      ],
      exports: [RouterModule],
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>I have tried fully deleting <code>path: '',</code> and the app redirected localhost:4000 to <code>profile-update</code>. Even if i delete <code>profile-update</code> I am still redirected to a Update Profile page.</p>
  <p>Home page directory tree looks like:</p>
  <pre><code>.
  ├── home-routing.module.ts
  ├── home.module.ts
  ├── home.page.html
  └── home.page.ts
  </code></pre>
  <pre><code>// home-routing.module.ts
  
  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { HomePage } from './home.page';
  
  const routes: Routes = [
      {
          path: '',
          component: HomePage,
      },
  ];
  
  @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
  })
  export class HomePageRoutingModule {}
  </code></pre>
  <p>I am not sure what the cause of this error is or what code is relevant so I don't know what other code should be included in my question.</p>
  <p>I also get a network error of <code>crbug/1173575, non-JS module files deprecated.</code>
  and have found this <a href="https://stackoverflow.com/questions/67191286/crbug-1173575-non-js-module-files-deprecated-chromewebdata-index%EA%9E%89530595551">Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551</a> which was not very helpful to solve thebug.</p>