How to route to a "subcomponent" in Angular

Question

I have a file structure like this:

app/
└── blog/
    └── posts/
        └── python-coding/

I have a route in my header that goes to blog, I am trying to make a routerLink that goes to python-coding post. posts is just and organizational directory, doesn't have any components.

I don't understand how to make the route on the blog page to python-coding work.

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BlogComponent } from './blog/blog.component';
import { PythonCoding } from './blog/posts/python-coding/python-coding.component';

export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'blog', component: BlogComponent },
    { path: 'posts/python-coding', component: PythonCoding },
];

I noticed that when I had blog/posts/python-coding, when I hovered in browser it was blog/blog/... so removed blog from path.

// src/app/app.component
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'frontend';
}

app has RouterOutlet imported, and uses it in template:

<!-- src/app/app.component.html -->
<app-header></app-header>
<main>
    <router-outlet></router-outlet>
</main>
<app-footer></app-footer>

The header has a working link to the blog, but I want the blog to have a working link to the python-code subpage:

<!-- src/app/blog/blog.component.html -->
<h1>Blog Posts:</h1>
<a routerLink="posts/python-coding">Python Coding</a>

However that link doesn't go to that page when clicked.

Answer 1

I think you may go with this LINK this will help you the kind of routing you want to achive

Answer 2

It seems like you have set up your routing correctly, but the issue might be related to the way you are defining the router link in your blog.component.html. Since the blog component is already at the /blog route, you should not repeat blog in the routerLink.

Try modifying your link to the Python Coding post like this:

    <!-- src/app/blog/blog.component.html -->
<h1>Blog Posts:</h1>
<a routerLink="python-coding">Python Coding</a>

This should correctly navigate to the /blog/posts/python-coding route when clicked.

Additionally, ensure that your PythonCoding component is correctly implemented and accessible at the /posts/python-coding route. If there are any issues with the component implementation or route configuration, that could also prevent the navigation from working as expected.