How to migrate Ag-Grid from version 21 to version 22 in Angular 8

Question

In version 22, Ag-grid radically changed their code so its now deployed in modules, primarily from two new packages @ag-grid-community/all-modules or @ag-grid-enterprise/all-modules. The documentation on their website is wholly unclear as to how to migrate successfully to the new version 22. Especially for Angular apps. Even the code examples don't work (they reference an unknown module @ag-grid-community/angular).

Does anyone know how to migrate Ag-Grid from version 21 to version 22 in Angular 8? Any info on the doing for the enterprise version also welcome.

Answer 1

If you still want to use all modules and angular, the setup is as follows:

Adding Ag-Grid dependency:

• Remove all your current aggrid dependencies.
• If you want to use community only, simly add @ag-grid-community/all-modules
• If you want to use enterprise, just add @ag-grid-enterprise/all-modules, no need to add community dependency as it is already included in the enterprise one

Adding Angular grid dependency

Instead of the old ag-grid-angular, you should now use @ag-grid-community/angular

So now, all your dependencies should look something like this, if using enterprise:

"@ag-grid-community/angular": "^22.1.2",
"@ag-grid-enterprise/all-modules": "^22.1.2",

Registering modules

Now it's time to configure what modules your grids will use. You can configure it per grid or globally.

You can register globally all the modules to all the grids in your app.module.ts:

import {ModuleRegistry, AllModules} from '@ag-grid-enterprise/all-modules';


export class AppModule {


  constructor() {
    ModuleRegistry.registerModules(AllModules);
  }
}

Changing imports

Now make sure to fix all your imports from the old packages to the new ones.

Eg.

import {AgGridAngular} from "ag-grid-angular"; 

becomes

import {AgGridAngular} from "@ag-grid-community/angular";

Updating CSS imports

You need to make sure all your CSS imports are updated to the new package system.

For example, this:

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
@import "~ag-grid-community/dist/styles/ag-theme-blue.css";

Becomes this:

@import "~@ag-grid-community/all-modules/dist/styles/ag-grid.css";
@import "~@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";
@import "~@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css";

For More info check ag-Grid Modules: Migrating