Carbon styles not applied after upgrading carbon-components-angular from v4 to v5

[Charanreddy6552]

Carbon styles missing after upgrading from carbon-componetns-angular v4 to v5
Styles.css
@import '~ngx-toastr/toastr';
@import "~bootstrap/dist/css/bootstrap.css";
@import '~ag-grid-community/styles/ag-grid.css';
@import '~ag-grid-community/styles/ag-theme-alpine.css';
@import "~carbon-components/css/carbon-components.css";
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

.window-size-level-one{
margin-left:-12px;
}

.window-size-level-two{
margin-right: 30px;
margin-left:312px;
}

.table-design {
width: 100%;
}

.table-border {
width:100%;
border: 2px solid;
border-spacing:30px;
padding:15%;
}

.mat-cell {
flex: 1;
display: revert;
align-items: center;
overflow: hidden;
word-wrap: break-word;
min-height: fit-content;
}

.topheading{
width:100%;
text-align: center;
background-color: #AFDFD1;
color: #74797d;
}

svg{
cursor: pointer;
}

bx--side-nav__icon > svg {
width: 1.5rem !important;
height: 1.5rem !important;
/* fill: #525252; */
}

.bx--side-nav__icon > svg {
width: 1.3rem !important;
height: 1.3rem !important;
}

#menu_left .bx--side-nav__icon > svg{
fill: white;
}

#menu_left .bx--side-nav__icon > svg:hover {
fill: #161616 !important;
color: #f4f4f4;
}

.bx--text-area {
line-height: 1.3;
}

ibm-panel div{
height : 45% !important;
}

footer.bx--side-nav__footer {
background-color : black !important;
font-size: small;
text-align: center;
}

.bx--side-nav__footer:before {
content: "Powered By IBM Version 1.6 " !important;
color: #00ffffcf !important;
}

.bx--side-nav__item.bx--side-nav__item--icon a.bx--side-nav__link {
padding-left: 1.2rem !important;
}

.bx--side-nav__submenu-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
color: aliceblue ;
}

a.bx--header__name{
display: none !important;
}

#header > ibm-header-navigation > nav.bx--header__nav > ul.bx--header__menu-bar > ibm-header-item > li > a.bx--header__menu-item:hover {
background-color: #161616 !important;
color: #f4f4f4;
}

#header > ibm-header-navigation > nav.bx--header__nav > ul.bx--header__menu-bar > ibm-header-item > li > a:hover {
text-decoration:none !important;
}

#voidSpace > a.bx--header__name{
display:inline !important;
}

.bx--header__action--active {
border-right:#161616 !important;
border-left:#161616 !important;
}

.bx--text-input:disabled {
outline: 2px solid transparent;
outline-offset: -2px;
border-bottom: 1px solid transparent;
background-color: #F4F4F4;
color: #C6C6C6;
cursor: not-allowed;
-webkit-text-fill-color: #282525;
}
.bx--list-box__field[disabled] {
color: #C6C6C6;
outline: none;
-webkit-text-fill-color: #282525;
}
.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
width: 18rem;
-webkit-text-fill-color: #282525;
}

.bx--text-area:disabled {
border-bottom: 1px solid transparent;
background-color: #F4F4F4;
color: #C6C6C6;
cursor: not-allowed;
outline: none;
-webkit-text-fill-color: #282525;
}

.bx--data-table th {
padding-right: 0rem;
padding-left: 0rem;
background-color: #e0e0e0;
color: #161616;
font-size: 13px;
}

.bx--search--lg .bx--search-close, .bx--search--lg ~ .bx--search-button, .bx--search--lg.bx--search--expandable, .bx--search--lg.bx--search--expandable .bx--search-magnifier {
width: 2.5rem;
height: 2.5rem;
display: none;
}

::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
opacity: 0.54 !important;
color: #312e2e;
transform: translateY(0px) !important;
}

.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
opacity: 2 !important;
color: #312e2e;
transform: translateY(0px) !important;
}

.mat-form-field-infix {
display: block;
position: relative;
flex: auto;
min-width: 0;
width: 14rem !important;
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 17px;
line-height: 2;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}

.mat-input-element {
font: inherit;
background: rgba(0,0,0,0);
color: currentColor;
border: none;
outline: none;
padding: 0;
margin: 0;
margin-top: 0px;
width: 100%;
max-width: 100%;
vertical-align: middle !important;
text-align: inherit;
box-sizing: content-box;
}

#pop-up-clear-icon .bx--modal-close.ng-star-inserted{
display: none;
}

Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"WorkPad": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css",
"node_modules/ngx-toastr/toastr.css"
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "15mb",
"maximumError": "20mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "1200kb",
"maximumError": "4000kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "WorkPad:build:production"
},
"development": {
"browserTarget": "WorkPad:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "transitionWorkPad:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css",
"node_modules/ngx-toastr/toastr.css"
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
}
}
}
}
}

package.json
{
"name": " ",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 8080",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"sonar": "sonar-scanner"
},
"private": true,
"dependencies": {
"@adobe/css-tools": "^4.3.1",
"@ag-grid-enterprise/all-modules": "^27.3.0",
"@angular/animations": "^16.2.12",
"@angular/cdk": "^16.2.14",
"@angular/common": "^16.2.12",
"@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12",
"@angular/material": "^16.2.14",
"@angular/material-moment-adapter": "^16.2.14",
"@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12",
"@angular/router": "^16.2.12",
"@carbon/icons": "^11.17.0",
"@carbon/styles": "^1.24.0",
"@carbon/type": "^11.16.0",
"ag-charts-angular": "^6.1.1",
"ag-grid-angular": "^30.1.0",
"ag-grid-community": "^30.1.0",
"ag-grid-enterprise": "^30.1.0",
"angular-web-storage": "^14.0.0",
"angular-webstorage-service": "^1.0.2",
"array-sort": "^1.0.0",
"axios": "^1.8.2",
"body-parser": "^1.20.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.0.0-alpha3",
"carbon-components": "^10.58.15",
"carbon-components-angular": "^5.57.6",
"chokidar": "^4.0.1",
"cookie-parser": "^1.4.7",
"core-js": "^3.23.4",
"cors": "^2.8.5",
"cross-spawn": "^7.0.5",
"crypto": "^1.0.1",
"express": "^4.21.2",
"express-session": "^1.18.1",
"fetch": "^1.1.0",
"file-saver": "^2.0.5",
"fs": "0.0.1-security",
"fs-extra": "^10.1.0",
"hammerjs": "^2.0.8",
"https": "^1.0.0",
"ip": "^2.0.1",
"jasmine": "^4.2.1",
"jquery": "^3.6.0",
"json5": "^2.2.2",
"jszip": "^3.10.1",
"loader-utils": "^3.2.1",
"mariadb": "^3.0.1",
"mat-video": "^2.8.1",
"minimatch": "^3.0.5",
"moment": "^2.29.4",
"multer": "^1.4.5-lts.1",
"mysql": "^2.18.1",
"ngx-toastr": "^15.0.0",
"node-fetch": "^2.6.0",
"npm": "^9.8.1",
"passport": "^0.7.0",
"passport-ci-oidc": "^2.0.5",
"passport-idaas-openidconnect": "^2.0.2",
"path": "^0.12.7",
"popper.js": "^1.14.4",
"promise": "^8.1.0",
"round-to": "^3.0.0",
"rxjs": "~7.5.0",
"semver": "^7.5.2",
"tslib": "^1.14.1",
"ua-parser-js": "^0.7.33",
"webpack": "^5.94.0",
"winston": "^3.8.1",
"winston-daily-rotate-file": "^4.7.1",
"xlsx-js-style": "^1.2.0",
"zone.js": "~0.13.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.16",
"@angular/cli": "^16.2.16",
"@angular/compiler-cli": "^16.2.12",
"@types/file-saver": "^2.0.5",
"@types/hammerjs": "^2.0.41",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"sonar-scanner": "^3.1.0",
"typescript": "~4.9.5"
}
}

[Akshat55]

See: https://github.com/carbon-design-system/carbon-components-angular/wiki/v4-to-v5-upgrade-guide

You're importing carbon-components instead of @carbon/styles. In 11, prefix has been changed from bx-- to cds--.