Routing issue for dynamic pages, not even trying to access component

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!

Continue reading...