0

I'm studying about Angular and having some router troubles, because I'm trying to access one of the routes with a path parameter and having an error, the page doesn't load.

The main page:

enter image description here

The routed one:

enter image description here

The app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { CourseListComponents } from './courses/course-list.component';
import { StarComponent } from './star/star.component';
import { ReplacePipe } from './pipe/replace.pipe';
import { NavBar } from './nav-bar/nav-bar.component';
import { Error404Component } from './error-404/error-404.component';
import { InfoComponent } from './courses/course-info.component';

@NgModule({
  declarations: [
    AppComponent,
    CourseListComponents,
    StarComponent,
    ReplacePipe,
    NavBar,
    Error404Component,
    InfoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'courses', component: CourseListComponents
      },
      {
        path: 'course/info:id', component: InfoComponent
      },
      {
        path: '', redirectTo: 'courses', pathMatch: 'full'
      },
      {
        path: '**', component: Error404Component
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The InfoComponent class:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    templateUrl: './course-info.component.html'
})
export class InfoComponent implements OnInit {

    courseId!: number;

    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit(): void {
        this.courseId = +this.activatedRoute.snapshot.paramMap.get('id')!
    }
}

The HTML component responsable by render the contents:

<h2>Course List</h2>

<div class="form-group row">
    <label class="col-sm 2 col-form-label">Filter by course name:</label>

    <div class="col-sm-10">
        <input [(ngModel)]="filter" class="form-control">
    </div>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Image</th>
            <th>Name</th>
            <th>Price</th>
            <th>Code</th>
            <th>Release Date</th>
            <th>Rating</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let course of filteredCourses">
            <td><img [src]="course.imageUrl" alt="Courses icons" width="40" height="40"></td>
            <td>{{ course.name }}</td>
            <td>{{ course.price }}</td>
            <td>{{ course.code | lowercase | replace: '-' : ' ' }}</td>
            <td>{{ course.releaseDate | date: 'dd/MM/yyyy' }}</td>
            <td>
                <app-star-component [rating]="course.rating"></app-star-component>
            </td>
            <td>
                <a [routerLink]="['/course/info', course.id]" class="btn btn-primary mr-2">Info</a>
            </td>
        </tr>
    </tbody>
</table>

What it should render when the page is accessed:

<h2>Course ID: {{ courseId }}</h2>

Who wants to see the full code, it's at the link below:

https://github.com/LeoManzini/BootcampSantander/tree/main/Angular/course-manager

Someone who could help me with this, I'll be so thankfull!!

Leonardo Manzini
  • 9
  • 6

1 Answers1

1

You have missed the slash in route:

path: 'course/info:id', component: InfoComponent

should be:

path: 'course/info/:id', component: InfoComponent
ShevchenkoVV
  • 131
  • 5