How to update ag-grid versions?

Question

Previously I used:

• "ag-grid": "^18.1.2",
• "ag-grid-angular": "^18.1.1"
• "ag-grid-enterprise": "^18.1.1" version.

Since the licence was expired I got the new version licences.

And then I added:

• "@ag-grid-community/angular": "^22.1.1",
• "@ag-grid-community/core": "^22.1.1",
• "@ag-grid-enterprise/all-modules": "^22.1.1",
• "@ag-grid-enterprise/core": "^22.1.1",
• "@ag-grid-community/client-side-row-model": "^22.1.1",

And also I added

@import "./node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-grid.scss";
@import "./node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham/sass/ag-theme-balham.scss";
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

to styles.css file.

But row lines are missed in ag-grid for an updated version.

If you can give me suggestions it will be a great help for me.

This is another image of ag-grid.

Answer 1

I think you also need to upgrade "ag-grid": "^18.1.2", to "ag-grid-angular": "^20.1.0", to do so you need to follow changes

Step1: go to package.json and modify "ag-grid": "^18.1.2", to "ag-grid-angular": "20.1.0",

Step2: change your typescript version "typescript": "~2.7.2" to "typescript": "~3.2.4"

Step3: Run npm update in your project.

Step4: now run ng serve

Answer 2

Maybe this helps...my package.json looks slightly different than yours:

"ag-grid-angular": "^22.1.1",
"ag-grid-community": "^22.1.1",
"ag-grid-enterprise": "^22.1.1",