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
All markup files
Convert <p-calendar> elements to <p-datepicker> elements
Convert <p-dropdown> elements to <p-select> elements