In the process of developing a route within an Angular application, I have successfully implemented 3 routes. However, one particular route is giving me trouble.
I have three folders that need to redirect HTML based on the option chosen. In Angular, I created a folder called "courses" and included the following code:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CoursesDetailComponent } from './courses-detail/courses-detail.component';
import { CoursesComponent } from './courses/courses.component';
const routes: Routes = [
{path : '', redirectTo: '/courses', pathMatch: 'full'},
{path : 'courses', component: CoursesComponent},
{path : "/courses/:id", component: CoursesDetailComponent}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
All paths work perfectly except for the last one - when saved in the code, the browser displays nothing.
The code pertaining to information about courses is as follows:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-courses',
templateUrl: './courses.component.html',
styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {
courses = [
{'id': 1, 'name': 'Angular'},
{'id': 2, 'name': 'React'},
{'id': 3, 'name': 'MongoDB'},
{'id': 4, 'name': 'Ruby'},
{'id': 5, 'name': 'Bootstrap'},
];
constructor(private router: Router,
private route: ActivatedRoute) { }
ngOnInit(): void {
}
onSelect(courses: any){
this.router.navigate(['/courses', courses.id]);
}
}
I cannot figure out the issue - when adding the following line, the code compiles but nothing appears in the browser:
{path : "/courses/:id", component: CoursesDetailComponent}