Relative path of Parent Component is added to asset path when page is reloaded

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`](http://localhost:4200/dashboard/main.js "http://localhost:4200/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.

Continue reading...