Angular 19 Support

[mertsincan]

Details; #16783

[AStoker]

If it helps, here's a list of files that needed to be updated in my testing. The Docs still have a lot of work though. AStoker@a1bad87

[NateRadebaugh]

Can this be back-ported to a 17.x release once this is ready?

[mertsincan]

Today, we had a detailed meeting about Angular 19 and decided to support it with PrimeNG 19. We are very close to the PrimeNG 18.Final. After releasing it, we plan to release PrimeNG 19.rc.1 within 1 to 2 weeks. Thanks a lot for your understanding!

[mertsincan]

Can this be back-ported to a 17.x release once this is ready?

Unfortunately, we do not plan to port it to version 17. Primeng versions will be released following the Angular versions. Otherwise, there will be many breakages in frameworks and libraries that are under such active development. I think this is the most logical thing.

[radarsu]

For people interested with a dirty, temporary workaround, Angular 19 works with Primeng 18, if after installing dependencies you do:

1. Kill angular app.
2. Delete angular cache.
3. Run find ./node_modules/primeng/fesm2022 -type f -name "*.mjs" -exec sed -i 's/, i0\.ɵɵStandaloneFeature],/],/g' {} +
4. Enjoy.

Above could as well be added in package.json postinstall script for convenience:

"scripts": {
    "postinstall": "find ./node_modules/primeng/fesm2022 -type f -name \"*.mjs\" -exec sed -i 's/, i0\\.ɵɵStandaloneFeature],/],/g' {} +"
},

[robmanganelly]

MAC folks using @radarsu 's script 👀

"postinstall": "find ./node_modules/primeng/fesm2022 -type f -name \"*.mjs\" -exec sed -i '' 's/, i0\\.ɵɵStandaloneFeature],/],/g' {} +"

[JakeAi]

For people interested with a dirty, temporary workaround, Angular 19 works with Primeng 18, if after installing dependencies you do:

1. Kill angular app.
2. Delete angular cache.
3. Run find ./node_modules/primeng/fesm2022 -type f -name "*.mjs" -exec sed -i 's/, i0\.ɵɵStandaloneFeature],/],/g' {} +
4. Enjoy.

Above could as well be added in package.json postinstall script for convenience:

"scripts": {
    "postinstall": "find ./node_modules/primeng/fesm2022 -type f -name \"*.mjs\" -exec sed -i 's/, i0\\.ɵɵStandaloneFeature],/],/g' {} +"
},

Thanks for this. Have you noticed any side effects?

[radarsu]

@JakeAi
Haven't, so far it works like a charm for me.

[JakeAi]

@JakeAi Haven't, so far it works like a charm for me.

I'm working on a new project using angular 18, but the new signal functionality is a must have. I feel by the time I'm "done," I'd have to refactor to v19. I haven't noticed anything yet either.

[radarsu]

@JakeAi yeah, the signals make whole codebase so much more managable. I'd recommend mastering them quickly and Angular 19 release is crazy good, so on new project you might want to consider upgrading quickly.

I do a project with Angular 19 fully based on signals, primeng 18 and tailwind v4 beta. Figuring out perfect setup was tough, but those new releases solve so many problems I was struggling with in the past it's worth it (state management with signals feels so much better, management of primitive and semantic CSS values and components, theming and light/dark modes).

I even uninstalled zone.js and did zoneless angular and everything is working great, I no longer have obscured stack traces.

Feel free to contact me privately if you'd like to copy my setup.

[imaksp]

Hi @radarsu zoneless is working with primeng v18?, AFAIK zoneless is not supported by this lib yet.

[radarsu]

@imaksp
Haven't yet encountered any problems without it. I use OnPush changeDetection strategy and manage data via signals everywhere. But so far I use just few simple components from PrimeNG in that setup, maybe some advanced ones will have problems.

[Odex64]

@radarsu Hey, how did you manage to install Tailwind v4? I get a bunch of errors while attempting to install that in a clean Angular v19 project.

[radarsu]

@Odex64
I started with:

1. pnpm i -D tailwindcss@next @tailwindcss/postcss@next
2. I created postcss.config.json in root of project:

{
    "plugins": {
        "@tailwindcss/postcss": {}
    }
}

3. I added theme.css file in src/styles:

@import 'tailwindcss';

@theme {
    --color-*: initial;
    --font-*: initial;
   /* ... */
    --color-primary-500: var(--p-primary-500);
    --color-error-500: var(--p-error-500);
}

4. I imported theme.css file in my index.scss that's loaded by angular.json.

@use './primeng.scss' as *;
@use './components.scss' as *;
@use './utilities.scss' as *;
@import './theme.css';

Major nuances I experienced were:

1. It didn't work when I tried using another format than postcss.config.json (I believe I've tried js and mjs).
2. It didn't work when I used tailwind @theme in .scss file, so I had to keep tailwind configuration in .css.
3. It didn't work when I used @use './theme.css' as *; instead of @import './theme.css';.

[slawanextlevels]

Im still getting also with the postinstall

Uncaught TypeError: fn is not a function
    at core.mjs:19413:38
    at Array.forEach (<anonymous>)
    at initFeatures (core.mjs:19413:24)
    at Object.toString (core.mjs:19275:5)
    at noSideEffects (core.mjs:122:5)
    at ɵɵdefineComponent (core.mjs:19240:10)
    at <static_initializer> (primeng-menu.mjs:720:33)
    at primeng-menu.mjs:703:1

[radarsu]

@slawanextlevels make sure you have killed an angular app then cleaned angular cache directory, then run script and error should be gone.

[mertsincan]

Hi everyone,

Thank you so much for the PRs and feedback! PrimeNG 19 now works with Angular 19. Today, we plan to release PrimeNG 19-rc.1 so you can test it and share your thoughts.
master...v19

I’d also like to talk about what’s next for PrimeNG 20. In v18 and v19, our main focus was building the new theming engine, and now it’s complete. For PrimeNG 20, we want to improve the codebase completely. This includes using strict types, adding more tests, moving to a signal-based and zoneless structure, and updating all components with the latest best Angular practices. We have a lot of internal improvements planned and will share more details with you soon.

[yarikwest]

Hi everyone,

Thank you so much for the PRs and feedback! PrimeNG 19 now works with Angular 19. Today, we plan to release PrimeNG 19-rc.1 so you can test it and share your thoughts. master...v19

I’d also like to talk about what’s next for PrimeNG 20. In v18 and v19, our main focus was building the new theming engine, and now it’s complete. For PrimeNG 20, we want to improve the codebase completely. This includes using strict types, adding more tests, moving to a signal-based and zoneless structure, and updating all components with the latest best Angular practices. We have a lot of internal improvements planned and will share more details with you soon.

When is the planned final release of v19?

[mertsincan]

When is the planned final release of v19?

Unless there are any major issues, we plan to release PrimeNG v19.Final the next week.

[slawanextlevels]

I got master...v19 running. Thank you

[mertsincan]

PrimeNG 19.0.0-rc.1 Released; https://www.npmjs.com/package/primeng/v/19.0.0-rc.1

[dalenguyen]

Confirmed that 19.0.0-rc.1 fixed the Uncaught TypeError: fn is not a function issue on my end :)

[gbarrionuevo]

#17005

[dragsense]

PrimeNG 19.0.0-rc.1 working fine with angular 19

[alvaroaxo]

Confirmed, PrimeNG 19rc works with Angular 19

[lalo-mx]

I have an issue with 19rc, how are the styles configured now?

@import "primeng/resources/themes/fluent-light/theme.css";

X [ERROR] Could not resolve "primeng/resources/themes/fluent-light/theme.css"

    src/primeng.scss:1:8:
      1 │ @import "primeng/resources/themes/fluent-light/theme.css";
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "./resources/themes/fluent-light/theme.css" is not exported by package "primeng":

    node_modules/primeng/package.json:46:13:
      46 │   "exports": {
         ╵              ^

[Delagen]

@lalo-mx RTFM, migration guide is published https://primeng.org/guides/migration

[dragsense]

I have an issue with 19rc, how are the styles configured now?

@import "primeng/resources/themes/fluent-light/theme.css";

X [ERROR] Could not resolve "primeng/resources/themes/fluent-light/theme.css"

    src/primeng.scss:1:8:
      1 │ @import "primeng/resources/themes/fluent-light/theme.css";
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "./resources/themes/fluent-light/theme.css" is not exported by package "primeng":

    node_modules/primeng/package.json:46:13:
      46 │   "exports": {
         ╵              ^

no need to import the css files.

https://primeng.org/theming

Configuration API
Theme
The theme property is used to customize the initial theme.

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
providers: [
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura
}
})
]
};