Styles are not working properly after upgrade angular 18 to 19. And also there any replacement of theme "mdc-light-deeppurple" in angualr 19

[harsh-accrete]

Styles are not working properly after upgrade angular 18 to 19:
Please refer following screenshot:
First Screenshot Angular 18:

Second Screenshot Angular 19:

You can see that after angular 19 upgrade formatting is totally change. Please help for this and suggest.

Code:

WorkFlow

Please complate all required columns

Enter Workflow Name *

            <div class="field col-4">
                <label for="natureOfActivityId">Nature of Activity <span>*</span></label>
                <p-dropdown
                    [options]="NATURE_OF_ACTIVITY_DATA"
                    optionLabel="natureOfActivityName"
                    placeholder="Select Nature of Activity"
                    [filter]="true"
                    optionValue="natureOfActivityId"
                    filterBy="natureOfActivityName"
                    [showClear]="true"
                    formControlName="natureOfActivityId"
                >
                    <ng-template let-activity pTemplate="item">
                        <div>{{ activity.natureOfActivityName }}</div>
                    </ng-template>
                </p-dropdown>
                <span
                    *ngIf="
                        natureOfActivityId?.touched &&
                        natureOfActivityId?.invalid
                    "
                    >Select Nature of Activity</span
                >
            </div>

            <div class="field col-4" *ngIf="natureOfActivityId?.value == 1">
                <label for="capitalExpenseID">Nature Of Expense</label>
                <p-dropdown
                    [options]="CAPITAL_DATA"
                    optionLabel="capitalExpenseName"
                    placeholder="Select Capital Expense"
                    [filter]="true"
                    optionValue="capitalExpenseID"
                    filterBy="capitalExpenseName"
                    [showClear]="true"
                    formControlName="capitalExpenseID"
                >
                    <ng-template let-activity pTemplate="item">
                        <div>{{ activity.capitalExpenseName }}</div>
                    </ng-template>
                </p-dropdown>
                <span
                    *ngIf="
                        capitalExpenseID?.touched &&
                        capitalExpenseID?.invalid
                    "
                    >Select Capital Expense</span
                >
            </div>
            <div class="field col-4" *ngIf="natureOfActivityId?.value == 1">

            </div>
            <div class="field col-8" *ngIf="natureOfActivityId?.value != 1">

            </div>
            

            <div class="field col-4" *ngIf="natureOfActivityId?.value == 1">
                <label for="componetId">Component</label>
                <p-dropdown
                    [options]="COMPONET_DATA"
                    optionLabel="componetName"
                    placeholder="Select Component"
                    [filter]="true"
                    optionValue="componetId"
                    filterBy="componetName"
                    [showClear]="true"
                    formControlName="componetId"
                    (onChange)="GetActivityByComponetID($event.value)"
                >
                    <ng-template let-componet pTemplate="item">
                        <div>{{ componet.componetName }}</div>
                    </ng-template>
                </p-dropdown>
                <span *ngIf="componetId?.touched && componetId?.invalid"
                    >Select Component</span
                >
            </div>

            <div class="field col-4" *ngIf="natureOfActivityId?.value == 1">
                <label for="activityId">Sub Component</label>
                <p-dropdown
                    [options]="ACTIVITY_DATA"
                    optionLabel="activityName"
                    placeholder="Select Sub Component"
                    [filter]="true"
                    optionValue="activityId"
                    filterBy="activityName"
                    [showClear]="true"
                    formControlName="activityId"
                    (onChange)="GetSubActivityByActivityID($event.value)"
                >
                    <ng-template let-activity pTemplate="item">
                        <div>{{ activity.activityName }}</div>
                    </ng-template>
                </p-dropdown>
            </div>

            <div class="field col-4" *ngIf="natureOfActivityId?.value == 1">
                <label for="subActivityId">Activity</label>
                <p-dropdown
                    [options]="SUB_ACTIVITY_DATA"
                    optionLabel="subActivityName"
                    placeholder="Activity"
                    [filter]="true"
                    optionValue="subActivityId"
                    filterBy="subActivityName"
                    [showClear]="true"
                    formControlName="subActivityId"
                    (onChange)="
                        GetSubToSubActivityBySubActivityID($event.value)
                    "
                >
                    <ng-template let-subactivity pTemplate="item">
                        <div>{{ subactivity.subActivityName }}</div>
                    </ng-template>
                </p-dropdown>
            </div>

            <div class="field col-4" *ngIf="natureOfActivityId?.value == 1">
                <label for="subToSubActivityId">Sub Activity</label>
                <p-dropdown
                    [options]="SUB_TO_SUB_ACTIVITY_DATA"
                    optionLabel="subToSubActivityName"
                    placeholder="Sub Activity"
                    [filter]="true"
                    optionValue="subToSubActivityId"
                    filterBy="subToSubActivityName"
                    [showClear]="true"
                    formControlName="subToSubActivityId"

                >
                    <ng-template let-subtosubactivity pTemplate="item">
                        <div>
                            {{ subtosubactivity.subToSubActivityName }}
                        </div>
                    </ng-template>
                </p-dropdown>
            </div>

[harsh-accrete]

""Updated code in angular 19"""

WorkFlow List

<!-- Approval Flow Table Section -->
<p-table #dt1 [value]="APPROVAL_FLOW_DATA" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10, 25, 100]"
    [sortMode]="'multiple'" [globalFilterFields]="[
        'workflow',
        'natureofActivityName',
        'componet',
        'activity',
        'subActivity',
        'subToSubActivity',
        'preparedBy',
        'createdDate',
        'noteCount'
    ]" [showCurrentPageReport]="true" [columns]="selectedColumns"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">


    <ng-template pTemplate="caption" *ngIf="approvalFlowPermission?.isExport">
        <div class="flex justify-content-between flex-column sm:flex-row">
            <div class="col-8">
                <p-splitButton label="Export" icon="pi pi-file" [model]="exportOptions"
                    class="mb-2"></p-splitButton>
            </div>

            <div class="col-2">
                <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
                    placeholder="Please select columns">
                </p-multiSelect>
            </div>
            <div class="col-2">
                <p-iconfield iconPosition="left">
					<p-inputicon class="pi pi-search" />
					<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)"
					placeholder="Search Keyword" />
				</p-iconfield>
            </div>

        </div>
    </ng-template>

    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="min-width: 8rem">Action</th>
            <!-- <th pSortableColumn="remarks" style="min-width: 14%">
                <div class="flex justify-content-between align-items-center">
                    Subject
                    <p-sortIcon field="remarks"></p-sortIcon>
                </div>
            </th>
            <th pSortableColumn="expenseType" style="min-width: 12%">
                <div class="flex justify-content-between align-items-center">
                    Expense Type
                    <p-sortIcon field="expenseType"></p-sortIcon>
                </div>
            </th>
            <th pSortableColumn="department" style="min-width: 12%">
                <div class="flex justify-content-between align-items-center">
                    Department
                    <p-sortIcon field="department"></p-sortIcon>
                </div>
            </th> -->

            <!-- <th pSortableColumn="workflow" style="min-width: 14%">
                <div class="flex justify-content-between align-items-center">
                    Workflow Name
                    <p-sortIcon field="workflow"></p-sortIcon>
                </div>
            </th>
            <th pSortableColumn="natureofActivityName" style="min-width: 14%">
                <div class="flex justify-content-between align-items-center">
                    Nature of Activity
                    <p-sortIcon field="natureofActivityName"></p-sortIcon>
                </div>
            </th>

            <th pSortableColumn="componet" style="min-width: 14%">
                <div class="flex justify-content-between align-items-center">
                    Component
                    <p-sortIcon field="componet"></p-sortIcon>
                </div>
            </th>
            <th pSortableColumn="activity" style="min-width: 14%">
                <div class="flex justify-content-between align-items-center">
                    Activity
                    <p-sortIcon field="activity"></p-sortIcon>
                </div>
            </th>
            <th pSortableColumn="subActivity" style="min-width: 14%">
                <div class="flex justify-content-between align-items-center">
                    Sub Activity
                    <p-sortIcon field="subActivity"></p-sortIcon>
                </div>
            </th>
            <th pSortableColumn="subToSubActivity" style="min-width: 14%">
                <div class="flex justify-content-between align-items-center">
                    Sub To Sub Activity
                    <p-sortIcon field="subToSubActivity"></p-sortIcon>
                </div>
            </th>

            <th pSortableColumn="preparedBy" style="min-width: 12%">
                <div class="flex justify-content-between align-items-center">
                    Prepared By
                    <p-sortIcon field="preparedBy"></p-sortIcon>
                </div>
            </th>
            <th pSortableColumn="createdDate" style="min-width: 12%">
                <div class="flex justify-content-between align-items-center">
                    Date
                    <p-sortIcon field="createdDate"></p-sortIcon>
                </div>
            </th> -->

            <th *ngFor="let col of columns">
                {{col.header}}
            </th>

            <!-- <th pSortableColumn="noteCount" style="min-width: 12%">
                <div class="flex justify-content-between align-items-center">
                    No Of Active Notes
                    <p-sortIcon field="noteCount"></p-sortIcon>
                </div>
            </th> -->
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-tutorial let-columns="columns">
        <!-- <ng-template pTemplate="body" let-row let-i="rowIndex"> -->
        <tr>
            <td>
                <!-- Button that toggles OverlayPanel visibility -->
                <!-- *ngIf="(row.noteCount == 0 || userId == 1 || userId == 2) && btnUpdate && btnDelete" -->
                <button pButton icon="pi pi-bars" class="p-button-link"
                    (click)="popover.toggle($event)"></button>

                <!-- OverlayPanel with edit and delete options -->
                <p-popover #popover [style]="{ width: '150px' }">
                    <button pButton icon="pi pi-plus" class="menu-item"
                        (click)="AddApprovalNote(tutorial.approvalFlowId)"
                        *ngIf="tutorial.employeeId == userId"></button>
                    <button *ngIf="approvalFlowPermission?.update" pButton icon="pi pi-pencil" class="menu-item"
                        (click)="EditApprovalFlow(tutorial.approvalFlowId)"></button>
                    <button *ngIf="approvalFlowPermission?.delete" pButton icon="pi pi-trash" class="menu-item"
                        (click)="DeleteApprovalFlow(tutorial.approvalFlowId)"></button>

                    <!-- <button pButton icon="pi pi-plus" class="menu-item"
                        (click)="AddApprovalNote(row.approvalFlowId)" *ngIf="row.employeeId == userId"></button> -->
                    <!-- *ngIf="row.employeeId == userId && row.createdBy != userId && btnUpdate" -->
                    <!-- <button *ngIf="approvalFlowPermission?.update" pButton icon="pi pi-pencil" class="menu-item"
                        (click)="EditApprovalFlow(row.approvalFlowId)"></button>
                    <button *ngIf="approvalFlowPermission?.delete" pButton icon="pi pi-trash" class="menu-item"
                        (click)="DeleteApprovalFlow(row.approvalFlowId)"></button> -->
                    <!-- *ngIf="row.employeeId == userId && row.createdBy != userId && btnDelete" -->
                </p-popover>
            </td>
            <!-- <td>{{ row.workflow }}</td>
            <td>{{ row.natureofActivityName }}</td>
            <td>{{ row.componet || '-' }}</td>
            <td>{{ row.activity || '-' }}</td>
            <td>{{ row.subActivity || '-'}}</td>
            <td>{{ row.subToSubActivity || '-' }}</td>
            <td>{{ row.preparedBy }}</td>
            <td>
                {{ row.createdDate | date : "dd-MMM-yyyy h:mm:ss a" }}
            </td> -->


            <td *ngFor="let col of columns">
                <ng-container *ngIf="col.field === 'createdDate'; else defaultField">
                  {{ tutorial[col.field] | date: 'dd-MMM-yyyy h:mm:ss a' }}
                </ng-container>
                <ng-template #defaultField>
                  {{ tutorial[col.field] }}
                </ng-template>
              </td>
              

            <!-- <td style="text-align: center;">
                {{ row.noteCount }}
            </td> -->
        </tr>
    </ng-template>

    <ng-template pTemplate="emptymessage">
        <tr>
            <td colspan="7">No data matching</td>
        </tr>
    </ng-template>
</p-table>

[augielopez]

I'm experiencing the same issue after upgrading directly to Angular 20 from an earlier version. The styles are no longer rendering properly.

At first, I thought it was a mistake on my part, so I deleted everything, redownloaded the project, and ran it again—but I still get the same incorrect styling. I've attached two screenshots: one showing how the UI should look, and another showing how it looks after the upgrade.

there any plans to look into this?

Thanks in advance for any guidance.

[jesarebar]

Had the same issue, fixed it by importing "@tailwindcss/postcss" and creating a .postcssrc.json file in the project root (https://tailwindcss.com/docs/installation/using-postcss)