So I have Ng routing for Angular18 configured as below for app.routes.ts which is default routing

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

export const routes: Routes = [
    { path: '',component: LoginComponent },
    { path: 'dashboard',loadChildren: () => import('./dashboard/dashboard.routes').then(m => m.routes)}];

and child routing which is dashboard.routes.ts is configured as below:

import { Routes } from '@angular/router';

import { DashboardComponent } from './dashboard.component';
import { EventsComponent } from './components/events/events.component';
import { EventQuestionsComponent } from './components/events/eventQuestions/eventQuestions.component';
import { StatsComponent } from './components/stats/stats.component';

export const routes: Routes = [
    { path: '',component: DashboardComponent, children : [
            { path: '',component: StatsComponent },
            { path: 'events',component: EventsComponent },
            { path: 'event-questions/:id',component: EventQuestionsComponent },
        ] 
    }
];

All works fine untill I follow normal flow which is:

1. localhost/ – Login Page
2. localhost/dashboard – Default Dashboard Page
3. localhost/dashboard/events – Dashboard Events Page

But once I visit reload the page on Dashboard Event Page, I get below error and get white screen :
Loading module from “http://localhost/dashboard/main.js” was blocked because of a disallowed MIME type (“text/html”).
and same issue is faced by all assets, which is that ‘/dashboard/’ is added to all assets paths.

But If I visit ‘/dashboard/’ it loads fine.

I am trying to figure out why /dashboard/ is getting appended to all paths, when child paths are loaded.