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-itemponent';

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-itemponent.html',
  styleUrls: ['./news-itemponent.scss']
})
export class NewsItemComponent {
  helloWorldText = "Hello World";

  constructor() {
    console.log('Initialised');
  }
}

I have updated "appponent.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.

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-itemponent';

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-itemponent.html',
  styleUrls: ['./news-itemponent.scss']
})
export class NewsItemComponent {
  helloWorldText = "Hello World";

  constructor() {
    console.log('Initialised');
  }
}

I have updated "appponent.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.

• angular
• angular-routing

Share Improve this question Follow edited Mar 11 at 15:18 Username_null asked Mar 11 at 13:40 Username_nullUsername_null 1,34722 gold badges2121 silver badges3030 bronze badges 2

• We would need to see NewsItemComponent, and how it calls the api backend. – ekalin Commented Mar 11 at 13:46
• I have updated the original question. – Username_null Commented Mar 11 at 15:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Believe it or not, I found the answer after much digging. I needed to add the following to my index.html

<base href="/">

That was it. That caused the weird behaviour.