Angular Route with parameter is not working

I am using Angular 18 and just imported Admin LTE assets. My angular routing is working fin without any route parameter. But whenever I am trying to use route parameter it is showing weird un expected errors.

Here is my route config:

import { Routes } from '@angular/router';
import { HomeComponent } from './core/home/home.component';
import { ChapterComponent } from './areas/StrumMain/chapter/chapter.component';

export const routes: Routes = [
{ path: '', redirectTo: 'Home', pathMatch: 'full' },
{ path: 'Home', component:HomeComponent },
{ path: 'Chapter/:id', component:ChapterComponent },
];



And when I am navigating to the chapter/2

the console shows the following errors:

Refused to apply style from 'http://localhost:4200/Chapter/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

GET http://localhost:4200/Chapter/polyfills.js net::ERR_ABORTED 404 (Not Found)

GET http://localhost:4200/Chapter/main.js net::ERR_ABORTED 404 (Not Found)

GET http://localhost:4200/Chapter/scripts.js net::ERR_ABORTED 404 (Not Found)

Refused to execute script from 'http://localhost:4200/Chapter/scripts.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.


For some reason it is trying to load the js and css files from chapter directory(which not supposed to happen)

I don't have any clue why is this happening

For more detail here is the git link of my code. (*branch: Strom_POC)

in the chapter component i tried to read the route parameter but before that getting error

Continue reading...