Angular gets bugged and works just when restarting vscode

[DAVIAMERICO242]

Describe the bug

Error:

after some actions I will show, the errors below would thrown through my whole application.
main.ts:5 ERROR Error: ASSERTION ERROR: token must be defined [Expected=> null != undefined <=Actual]
main.ts:5 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')

Forcing the error:
This problem specially occurs when I'm in a component using the following shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';
import { DialogModule } from 'primeng/dialog';
import { TableModule } from 'primeng/table';
import { AvatarModule } from 'primeng/avatar';
import { Menubar } from 'primeng/menubar';
import { ToastModule } from 'primeng/toast';
import { ButtonModule } from 'primeng/button';
import { DatePickerModule } from 'primeng/datepicker';
import { ToggleSwitchModule } from 'primeng/toggleswitch';
import { MultiSelectModule } from 'primeng/multiselect';
import { SkeletonModule } from 'primeng/skeleton';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { SelectModule } from 'primeng/select';
import { DrawerModule } from 'primeng/drawer';
import { Tooltip } from 'primeng/tooltip';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    DrawerModule,
    Tooltip,
    InputTextModule,
    InputGroupModule, 
    InputGroupAddonModule,
    SelectModule,
    InputNumberModule,
    SkeletonModule,
    DialogModule,
    TableModule,
    AvatarModule,
    Menubar,
    ToastModule,
    ButtonModule,
    DatePickerModule,
    ToggleSwitchModule,
    MultiSelectModule
  ],
  exports:[
    CommonModule,
    FormsModule,
    DrawerModule,
    Tooltip,
    InputTextModule,
    SkeletonModule,
    InputGroupModule, 
    SelectModule,
    InputGroupAddonModule,
    InputNumberModule,
    DialogModule,
    TableModule,
    AvatarModule,
    Menubar,
    ToastModule,
    ButtonModule,
    DatePickerModule,
    ToggleSwitchModule,
    MultiSelectModule
  ]
})
export class SharedModule { }

But it's not enough, it exactly occurs when I use a component from some module (belonging to shared module) in the component view when I'm on the route for such component, after that the errors below would be thrown on all my application:

main.ts:5 ERROR Error: ASSERTION ERROR: token must be defined [Expected=> null != undefined <=Actual]
main.ts:5 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')

there are others errors can be thrown it's random which one it's, being directly it broke my angular app, I'd get undefined is not a function exceptions on unrelated services etc...

Restarting my VSCode will solve the problem without needing undo the importings or removing components from shared module from view.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-safpucjd?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fhome%2Fhome.component.html

Environment

Angular Version: 19.1.1
PrimeNG version: 19.0.2
Browser: This bug stands regardless the browser.

Angular version

19.1.1

PrimeNG version

v19

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

Error:

Steps to reproduce the error:

Go to https://stackblitz.com/edit/github-safpucjd?file=src%2Fapp%2Fhome%2Fhome.component.html,src%2Fapp%2Fapp.config.ts

at home.component View (html), (the shared module with prime modules is already imported on component controller), after that add a prime ng button like <p-button label="anything"/> you will see this exception on console:

TypeError: Cannot read properties of undefined (reading 'Button') 
  at HomeComponent_UpdateMetadata....

Expected behavior

Work

[can-oezkan]

The issue you have seems to be unrelated to primeng. Also the stackblitz you provided does not throw any errors.

[DAVIAMERICO242]

I have troubles to clone it on stackblitz it seems it doesn't support routing, but the main issue might be due to HMR as default on angular now https://blog.ninja-squad.com/2025/01/15/what-is-new-angular-19.1/.

[can-oezkan]

Stackblitz supports routing, you just have to add a provider to your app.config.ts:

import { provideHttpClient, withFetch } from "@angular/common/http";
import { ApplicationConfig } from "@angular/core
import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
import { providePrimeNG } from "primeng/config";
import Aura from "@primeng/themes/aura";
+ import { routes } from "./app.routes";
+ import { provideRouter } from "@angular/router";

export const appConfig: ApplicationConfig = { providers.
  providers: [
+   provideRouter(routes),
    provideHttpClient(withFetch()),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: { preset: Aura },
    }),
  ],
};

[DAVIAMERICO242]

Steps to reproduce the error:

Go to https://stackblitz.com/edit/github-safpucjd?file=src%2Fapp%2Fhome%2Fhome.component.html,src%2Fapp%2Fapp.config.ts

at home.component View (html), (the shared module with prime modules is already imported on component controller), after that add a prime ng button like <p-button label="anything"/> you will see this exception on console:

TypeError: Cannot read properties of undefined (reading 'Button') 
  at HomeComponent_UpdateMetadata....

[DAVIAMERICO242]

It's actually an angular bug angular/angular#59602, it's solved on version 19.1.2