Html Question posted in
Some basic documentation can be found here.

Html – 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.

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

Tags:

2

Answers


  1. 0

    I map the appointment-review path to AppointmentReview component. Then, on ts file ı get the appointmentId from URL with activated route and using query params.

    '{ 
path: 'appointment-review', 
component: AppointmentReviewComponent 
 },
 this.activatedRoute.queryParams.subscribe(params => {
  this.appointmentId = +params['appointmentId']; 
  console.log(this.appointmentId);
  });'
    Login or Signup to reply.
  2. 0

    It looks like you have fixed the issue and not updated this question. After your commit 575781b the error no longer persist. Please update your question next time so people don’t spending time to invest in your issues.

    I can’t tell why the error existed. If you know, you can share so the next person knows it which come across this. I think the linked commit can help finding it.

    For the next person having this issue: The given code in the question is fine. (Stackblitz of basic route example)

    Some things I noticed in your project:

    • You are working on branch Strom_POC. I updated your question.
    • In the current state it’s not working, @angular/googlemaps is on angular 18 while the rest is on angular 17 -> unify angular versions to make it work.
    • You published your google maps API key -> create a new one and don’t push it to on public branch.
    • Your libs are within an assets folder as old versions. That’s not the way js-libraries are used in 2024. -> remove packages from asset folder and put them to your package.json
    • ⬆ This is even more problematic because the assets-libraries are outdated for years and have CVEs, e.g.: raphaeljs v2.1.0 (2012), moment v2.10.3 (2015), …
    • When I start your app I permanentely get the error "Uncaught ReferenceError: Morris is not defined" -> To fix this you have to find out where it is used and then put Morris at the right position in your angular.json. Before that you should move your libraries from assets -> npm as mentioned.

    You are welcome.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search