Developer Programs

Learn

Docs

Migrating from PrimeNG v17 to v19

Technical Info > Third-Party Support > Migrating from PrimeNG v17 to v19

Starting with version 18, PrimeNG’s UI component library includes a number of large breaking changes. PrimeNG v19 is the latest version that fully embraces modern Web APIs and eliminates legacy technical debt. A significant update in v18/19 is the new styled mode implementation, which replaces the previous SASS-based approach with a design token architecture utilizing CSS variables.

Component names have been updated for clarity, such as Datepicker replacing Calendar and Select replacing Dropdown. Consistency in naming conventions has been improved across components, ensuring uniformity in CSS class names.

Below is a basic list of steps to take to upgrade your application to use the latest v19 of PrimeNG’s component library. This is not an exhaustive list. Additional information on breaking changes and version updates can be found on the PrimeNG website.

angular.json

  • Remove primeng.min.css from styles array

tsconfig.json

  • Change moduleResolution from node to bundler

package.json

  • Update primeng to 19.1.0

  • Add @primeng/themes: 19.0.5

app.module.ts

  • Convert CalendarModule to DatePickerModule

  • Convert DropdownModule to SelectModule

  • Add import { providePrimeNG } from ‘primeng/config’;

  • Add import { RuiTheme } from ‘@jkhy/responsive-ui-prime-ng’;

  • In the providers section, add

Add the PrimeNG Theme Provider
providePrimeNG({
    theme: {
        preset: RuiTheme,
        options: { darkModeSelector: false }
    }
}),

All markup files

  • Convert <p-calendar> elements to <p-datepicker> elements

  • Convert <p-dropdown> elements to <p-select> elements


Support options
Have questions on this topic?
Join the Responsive UI team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.

Did this page help you?

Last updated Thu Jul 31 2025