Angular: Decorators are not valid here.ts(1206)

I'm currently doing a switching theme function in an Angular 17 project with PrimeNg 17. I follow this tutorial in the Primeng documentation: https://www.youtube.com/watch?v=5VOuUdDXRsE&embeds_referring_euri=https%3A%2F%2Fprimeng.org%2F&source_ve_path=Mjg2NjY&feature=emb_logo and this is my theme.service.ts

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { SystemService } from './system.service';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private systemService: SystemService
  ) {}

  switchTheme(theme: string): void {
    let themeLink = this.document.getElementById(
      'app-theme'
    ) as HTMLLinkElement;

    if (themeLink) {
      themeLink.href = 'assets/themes/' + theme + '/theme.css';
      this.systemService.setLocalStorage('theme', theme);
    }
  }
}

The app works fine and the switch theme function works also but I have this error message Decorators are not valid here.ts(1206) at @Inject.

Is there any way to fix this or disable the error/warning? Tks.

I tried replicating your error on Stackblitz, but it's working fine for me, could you try the below change?

import { inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { SystemService } from './system.service';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  document: Document = inject(DOCUMENT);

  constructor(
    private systemService: SystemService
  ) {}
  ...

Stackblitz where the theme switcher works great:

Stackblitz Demo