I am currently attempting to learn Angular and am using an existing API as a back-end. One of the types of pages is a dynamic news page following the traditional news/news-item-slug pattern.
I am running Angular version 19.
I have generated a NewsItemComponent and filled it with similar code to my other working components, e.g. the init and constructor etc.
In my app.routes.ts file I have the following line
{ path: 'news/:slug', component: NewsItemComponent },
Which is hooked up to the component using this import
import { NewsItemComponent } from './news-item/news-item.component';
I'm in Visual Studio for my IDE, so it does tell me if the path is incorrect.
So far, so good, however if I navigate to /news/my-news-item-slug, the URL has a 200 response, however in my Chrome developer tools network tab there is no attempt to call the API endpoint and none of the console.logs I have in the component are being triggered in Chrome's console.
It's not a CORS thing and I have tested the API call outside of angular, however since no call is being made to the API, this is irrelevant.
From all this I can assume that "NewsItemComponent" isn't being hit.
As far as I can tell I am setting the route up properly as per the version of Angular that I'm using!
As requested edited to add the component, which is now bare bones.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-news-item',
standalone: true,
imports: [CommonModule],
templateUrl: './news-item.component.html',
styleUrls: ['./news-item.component.scss']
})
export class NewsItemComponent {
helloWorldText = "Hello World";
constructor() {
console.log('Initialised');
}
}
I have updated "app.component.html" to look like this.
<header>
<app-navigation></app-navigation>
</header>
<main>
<a routerLink="/news/my-story">News Item</a>
<router-outlet></router-outlet>
</main>
<app-site-footer></app-site-footer>
If I click on "News Item" the page will render.
However if I copy the URL into a new tab or even refresh the page, oddly the page will no longer render.
