Ultima Angular 19 PrimeNG 19

[maqadeersaeed]

I am trying to update ultima version 17 to Angular 19. For Minimum impact, I removed some Pages to to reduce my impact and focused on layout components only. That was done successfully by changing components to standalone.

Now I am trying to update PrimeNG version.

We had primeng.min.css in styles.scss file like this;
@import "../node_modules/primeng/resources/primeng.min.css";

But After updating to Primeng 19, this folder doesn't exist. As per PrimeNG Documentation we have have to initialize theme like this

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
}
})
]
};

What preset do I have to set in ultima theme? Or what alternative approach do i need, to fix primeng.min.css.

Please Guide.

[trumannaq]

rimeNG({
theme: {
preset: Aura
}
})
]
};

What preset do I have to set in ultima theme? Or what alternative approach do i need, to fix primeng.min.css.

Please Guide.
ChatGPT said:
ChatGPT
It looks like you're facing an issue with the update from PrimeNG 17 to PrimeNG 19, and specifically how to handle the new theming system in the latest version.

In PrimeNG 19, the way themes are applied has indeed changed compared to previous versions. The primeng.min.css file no longer exists in the same way, and themes now need to be imported using the new configuration format.

Solution Overview:
No primeng.min.css in PrimeNG 19: As you've already noted, PrimeNG no longer includes the primeng.min.css file in the same way. Instead, theming is handled through the new configuration setup (providePrimeNG), as per the documentation.

Using the Ultima Theme in PrimeNG 19:

Since you are using the Ultima theme and want to keep the look and feel similar, you should ensure that you import the correct Ultima theme and apply it properly within the new theming structure in PrimeNG 19.
As of PrimeNG 19, Ultima is no longer included in the standard PrimeNG package, so you will likely need to download or reference the Ultima theme separately. The @primeng/themes package does not include Ultima by default.
Step-by-Step Guide:
Install the Ultima theme: If you haven’t already, you might need to manually install the Ultima theme from a separate source, as it’s no longer bundled with PrimeNG. You can usually get it from a custom theme or third-party sources. Ensure you have the Ultima theme available either via a package or a local copy.

For example, if you're downloading a custom Ultima theme from a source, you can add it to your styles.scss like this:
@import "path-to-ultima-theme/ultima.min.css";
Update the ApplicationConfig: The new theme configuration in PrimeNG 19 requires you to set the theme in the appConfig. For the Ultima theme, you'll need to provide the preset name based on how it is structured (assuming you’re using Aura as your base). If you're unsure about the exact name, it should follow the pattern of other available themes, or you may find it in the Ultima theme documentation.

Update your appConfig like this:
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import { Aura } from '@primeng/themes/aura'; // Use the specific theme import if available

export const appConfig: ApplicationConfig = {
providers: [
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura, // or Ultima, depending on the theme you’re using
},
}),
],
};
Check for Ultima Theme Preset: If you're specifically using the Ultima theme, you'll need to verify if it has a separate preset import like Aura. If Ultima is bundled in a different way, ensure you're using the right import and configuration.

Handle Custom Styling (Optional): If you have any custom styles specific to Ultima that were previously in the primeng.min.css, you’ll need to port those styles over to your current application. This may include any custom CSS or SCSS that was part of Ultima’s design.

Summary:
To fix the issue and migrate to PrimeNG 19 with the Ultima theme:

Ensure the Ultima theme is installed and available.
Import the Ultima theme (or an equivalent, if it's hosted externally) into your styles.scss file.
Use the correct theme preset in the providePrimeNG configuration, which may be Aura or another preset, depending on how the Ultima theme is structured.
After making these changes, your PrimeNG dropdowns and other components should be styled correctly using the Ultima theme or the equivalent. If you encounter further issues, you might want to check if Ultima is fully compatible with PrimeNG 19 or if there are any updates or fixes needed for that theme.

[djay1977]

Hello,
It is not possible to use Ultima 17 with PrimeNg 19 following the passage of the new theming with Design Tokens and TailwindCSS.
Normally, the premium templates should be updated by the end of the year so a little week of patience ;-)